Can't use 'this' inside setInterval

Question

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?

Because this == window inside the setInterval() callback function — Ja͢ck, Nov 17 '12 at 12:33

score 7 · Accepted Answer · edited May 23 '17 at 12:25

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

Use arrow function instead: setInterval(() => { }, 20) – Dacili Feb 16 '22 at 16:40 — Dacili, Feb 16 '22 at 16:40

score 5 · Answer 2 · answered Nov 17 '12 at 12:32

5

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);

answered Nov 17 '12 at 12:32

tobspr

8,200
5
33
46

Although the answer is correct I wouldn't say (not to confuse) that you cannot use `this`. You can but it refers to different context. – Peter Pajchl Nov 17 '12 at 12:39
I understood it right. The only reason that I accepted Asads answer, is that in the case of a parameter the "extra variable" has a smaller scope (less errors possible). Although I think this one is more readable. Thanks for the answer :) – Ramzi Khahil Nov 17 '12 at 13:17
This should be the accepted answer. I usually do this: `let self = this;` Super simple and gets the job done. – Jason Rice Aug 20 '18 at 16:03

Victor · Answer 3 · 2012-11-20T08:36:10.007

Because question is tagged [prototypejs] but no one answer uses Prototype, I decided to write an answer which really uses Prototype (jsfiddle).

var Something = Class.create({
    initialize: function(tMessage) {
        this.message = tMessage;
    },

    start: function(counter) {
        this.counter = counter;
        $("result").innerHTML += this.message + "+++<br />";
        this.looper = setInterval(this.addMessage.bind(this), 20);
    },

    addMessage: function() {
        $("result").innerHTML += this.message + "<br />";
        if (!this.counter--) {
            clearInterval(this.looper);
        }
    }
});

document.observe("dom:loaded", function() {
    var e = new Something("hi");
    e.start(2);
});

Use Class.create() to make more elegant classes.
Use $() instead of document.getElementById().
Use document.observe("dom:loaded") instead of window.onload
Use bind(this) to bind function to context.

The key point of question is in execution context of function. Wherever you use this, it just points to the current execution context. When you invoke someObject.someFunction() then someFunction() is executed in context of someObject, and this inside of someFunction() will point to someObject.

But you can make assignment someOtherObject.someFunction = someObject.someFunction, and then in someOtherObject.someFunction() this will point to someOtherObject.

Also you can pass reference to function into another function, as you did in setInterval(), and then execution context will be defined by setInterval() (actually it will be global context, i.e. this===window).

In order to bind execution context to the function (predefine context, override invoker's context) you need to use .bind() method. It returns new function, which will invoke your original function with your desired context no matter which context will be at the run time.

I retagged the question because I didn't know there is a library called 'prototypejs'. — Ramzi Khahil, Nov 21 '12 at 06:57

score 0 · Answer 4 · answered Nov 17 '12 at 12:43

0

Add

var self = this;

just before your call to setInterval and use self instead of this into the function defined in set*interval

answered Nov 17 '12 at 12:43

N. Hodin

1,056
6
12

Can't use 'this' inside setInterval

Edit

4 Answers4

Linked