Menu
It seems that I can't use this inside of a setInerval function. Why is that? What is a elegant solution?
<html>
<script>
var something = function(tMessage){
this.message = tMessage;
};
something.prototype = {
start : function(counter){
document.getElementById('result').innerHTML += this.message + "+++<br />";
var looper = setInterval(
function(){
// This is printing "undefined"
document.getElementById('result').innerHTML += this.message + "<br />";
if(!counter--)
clearInterval(looper);
},
20
);
}
};
window.onload = function(){
var e = new something("hi");
e.start(2);
}
</script>
<body>
<div id="result"></div>
</body>
</html>
Thanks for the answers!! But can anyone explain the difference between sending an argument and setting and extra variable? Any memory issues?
698
The problem here is that when your function is invoked this refers to the global object. To preserve the current scope, you could make a closure:
var looper = setInterval(
(function(scope){
return function(){
// This will no longer be printing "undefined"
document.getElementById('result').innerHTML += scope.message + "<br />";
if(!counter--)
clearInterval(looper);
};
})(this),
20
);
Instead of handwaving and trying to explain closures (which I am still in the process of fully mastering), I will direct you to this excellent answer: https://stackoverflow.com/a/111200/1726343
60
You cannot use this because you are in a new function block. I'm always creating a local variable (I'm sure there's a better way):
var c = this;
setInterval(function(
c.variable = 1;
), 100);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
