Objects's global variable
The problem is with object's variable:
this.timer
it's not "global", so when I click the stop button the val开发者_如何学Goue of the variable is wrong.
If I declare a global variable MyObject (loke var mytimer;) and use it instead this.timer, it works.This is my code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" language="JavaScript">
var MyObject = {
init: function(){
this.timer = 0;
document.getElementById("btn1").onclick = function(){
MyObject.RunIt();
};
document.getElementById("btn2").onclick = function(){
clearInterval(this.timer);
};
},
RunIt: function(){
var x=0;
this.timer = setInterval(function(){
x++;
document.getElementById("spn").innerHTML=x;
}, 1000);
}
};
</script>
<style type="text/css">
</style>
</head>
<body onload="MyObject.init();">
<input type="button" id="btn1" value="Run"/>
<input type="button" id="btn2" value="Stop"/>
<span id="spn"></span>
</body>
</html>
The problem is this: when you set "onclick" to a function call like that, there's no object reference in the call. The browser calls your function to do the "clearInterval", but "this" is not pointing to your object - in fact, it's pointing at the button element itself.
Here's one way to work around the problem:
var self = this;
document.getElementById('btn2').onclick = function() {
clearInterval(self.timer);
};
I know that question-askers on Stackoverflow get annoyed sometimes when people urge them to investigate jQuery or some other modern Javascript framework, but it's simply a better way to do things.
This is a common problem in writing javascript code; the Scope.
in an .onclick method on an element, the scope (this) is the element itself not the class you are in (MyObject).
i use this/that method; like below:
init: function(){
this.timer = 0;
document.getElementById("btn1").onclick = function(){
MyObject.RunIt();
};
var that = this;
document.getElementById("btn2").onclick = function(){
/**
Here i use 'that' instead of 'this';
because 'this' is the button element
*/
clearInterval(that.timer);
};
},
You can access an object through this only if the object was created by new.
The this in your code refers to the window object. In the event handlers it refers to the respective HTML element.
Read a detailled explanation.
Your MyObject declaration is an object, but lets say that it is not an object instance. There is a difference in JS.
Object instance example:
function MyClass() {
this.timer = 0;
this.RunIt = function() {
var x=0;
this.timer = setInterval(function(){
x++;
document.getElementById("spn").innerHTML=x;
}, 1000);
};
var me = this; // alias to current "this"
document.getElementById("btn1").onclick = function(){
// "this" refers to btn1, use me
me.RunIt();
};
document.getElementById("btn2").onclick = function(){
// "this" refers to btn2, use me
clearInterval(me.timer);
};
}
var MyObject = new MyClass();
Note, that there are many different ways to construct objects in JavaScript.
EDIT: it contains another bug: the event handler functions will be executed as members of the HTML element. So this in the handlers refers to the HTML element, not to your object.
EDIT: fixed the code
EDIT: Bad day, don't listen to me ;-)
加载中,请稍侯......
精彩评论