javascript: the "this" issue in setInterval (again)

Question

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!

Do `var me = this` at the start of your function, and use `me` from then on. — Niet the Dark Absol, Mar 02 '14 at 20:49
@NiettheDarkAbsol Oh boy, you have no idea how much pain I felt before I figured that out. — Shahar, Mar 02 '14 at 20:51
Using a function expression instead of a variable referring to the function does change *nothing*. Where did you find that "*trick*"??? — Bergi, Mar 02 '14 at 20:52
Bergi, I found that "trick" here: http://stackoverflow.com/questions/3242308/javascript-setinterval-not-working-for-object — , Mar 02 '14 at 21:06

jfriend00 · Accepted Answer · 2014-03-02T20:56:55.260

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

+1 for mentioning `.bind`, although you may want to expand on it a little bit. — giorgian, Mar 02 '14 at 20:53
@giorgian - I was working on expanding on `.bind()` - it is included now. — jfriend00, Mar 02 '14 at 20:57

score 0 · Answer 2 · answered Mar 02 '14 at 20:55

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.

Thanks to all for your help! Sean, I used "that" as a variable name. You know, "this" and "that" he he. It works and does not confuse me. — , Mar 03 '14 at 21:05

javascript: the "this" issue in setInterval (again)

2 Answers2