javascript: the "this" issue in setInterval (again) [duplicate]

Question

This question already has answers here:

How to access the correct `this` inside a callback (13 answers)

JavaScript setInterval and `this` solution (9 answers)

Closed 8 years ago.

EDIT: The practice below is NOT correct. The solution is to store "this" in another variable and use that in the setInterval function. See answers below.

this.growImage = function() {
        console.log("growImage:" + this.dom.id + "counter:" + this.grow_counter);
        if(this.grow_counter == 0) {
            this.tim_grow = window.setInterval(
                /******* FUNCTION TO BE CALLED BY SETINTERVAL ********/
                function() {
                    this.grow_counter++;
                    console.log("this.growStepByStep(): this.grow_counter = " + this.grow_counter); /*this is displayed as NaN */
                    if(this.grow_counter > this.times) {
                        window.clearInterval(this.tim_grow);
                        this.grow_counter = 0;
                    }
                }
                /******* FUNCTION TO BE CALLED BY SETINTERVAL ********/
            , 
            20);
        }
    }

EDIT: The above solution is NOT correct. It does not work. The console log does not "see" this.grow_counter, and displays a NaN instead. this.grow_counter is just a numeric value.

NOTE: that this function uses this inside it, so other simpler solutions won't do either. Thanks in advance!

Answer 1

The value of this is NOT preserved in your setInterval() callback. You have to save that value you want to another variable before the setInterval() call and use that inside the setInterval().

this.growImage = function() {
    console.log("growImage:" + this.dom.id + "counter:" + this.grow_counter);
    if(this.grow_counter == 0) {
        var self = this;
        this.tim_grow = window.setInterval(
            /******* FUNCTION TO BE CALLED BY SETINTERVAL ********/
            function() {
                self.grow_counter++;
                console.log("self.growStepByStep(): self.grow_counter = " + this.grow_counter); /*this is displayed as NaN */
                if(self.grow_counter > this.times) {
                    window.clearInterval(self.tim_grow);
                    self.grow_counter = 0;
                }
            }
            /******* FUNCTION TO BE CALLED BY SETINTERVAL ********/
        , 
        20);
    }
}

Or, if you are using modern browsers only, you can also use .bind() to manipulate the value of this to be set as you want like this:

this.growImage = function() {
    function intervalCallback() {
         this.grow_counter++;
         console.log("this.growStepByStep(): this.grow_counter = " + this.grow_counter); /*this is displayed as NaN */
         if(this.grow_counter > this.times) {
            window.clearInterval(this.tim_grow);
            this.grow_counter = 0;
        }
    }

    console.log("growImage:" + this.dom.id + "counter:" + this.grow_counter);
    if(this.grow_counter == 0) {
        this.tim_grow = window.setInterval(intervalCallback.bind(this), 20);
    }
}

Answer 2

Neit is correct, but to give a little bit more info.

You aren't understanding the scope that you are in when inside the setInterval.

Inside of your setInterval, you've created a new scope and 'this' only refers to things inside that new scope. His/her suggestion of setting a variable me = this and then using me.grow_counter means you are storing the outer scope in the variable 'me', which can then be used in your setInterval scope (although I would like to see a better variable name!).

Hope that helps.