Home/ Questions/Q 8874089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T18:38:01+00:00

It seems that I can’t use this inside of a setInerval function. Why is

  • 0

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>

Edit

Thanks for the answers!! But can anyone explain the difference between sending an argument and setting and extra variable? Any memory issues?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0