Since I need to pass an anonymous function to setInterval if I want parameters, I tried using the below code. Originally I had it calling this.countUp, but as that returned NaN I did some reading and found the .call(this) solution on SO. However, when I bined that with the anonymous function (which I admit I'm a bit foggy on), I'm now getting TypeError: this.countUp is undefined in Firebug.

I suppose I don't need to make count accessible, nor the playBeep method, but let's pretend I wanted to so that I can understand what I'm doing wrong with this code.

    function workout() {
        var beep = new Audio("beep1.wav");
        this.timerWorkout; //three timers in object scope so I can clear later from a different method
        this.timerCounter; 
        this.timerCoolDown;
        this.count = 0;

        this.startWorkout = function() {
            alert(this.count);
            this.timerWorkout = setTimeout(this.playBeep, 30 * 1000); //workout beep - 30 seconds
            this.timerCounter = setInterval(function() {this.countUp.call(this)}, 1000); //on screen timer - every second

        }

        this.startCoolDown = function() {
            this.timerCoolDown = setTimeout(this.playBeep, 10 * 1000); //cooldown beep - 10 seconds
        }

        this.playBeep = function() {
            beep.play(); //plays beep WAV
        }

        this.countUp = function() {
            this.count++;
            document.getElementById("counter").innerHTML = this.count; 
        }

    }

    var workout1 = new workout()

Since I need to pass an anonymous function to setInterval if I want parameters, I tried using the below code. Originally I had it calling this.countUp, but as that returned NaN I did some reading and found the .call(this) solution on SO. However, when I bined that with the anonymous function (which I admit I'm a bit foggy on), I'm now getting TypeError: this.countUp is undefined in Firebug.

I suppose I don't need to make count accessible, nor the playBeep method, but let's pretend I wanted to so that I can understand what I'm doing wrong with this code.

    function workout() {
        var beep = new Audio("beep1.wav");
        this.timerWorkout; //three timers in object scope so I can clear later from a different method
        this.timerCounter; 
        this.timerCoolDown;
        this.count = 0;

        this.startWorkout = function() {
            alert(this.count);
            this.timerWorkout = setTimeout(this.playBeep, 30 * 1000); //workout beep - 30 seconds
            this.timerCounter = setInterval(function() {this.countUp.call(this)}, 1000); //on screen timer - every second

        }

        this.startCoolDown = function() {
            this.timerCoolDown = setTimeout(this.playBeep, 10 * 1000); //cooldown beep - 10 seconds
        }

        this.playBeep = function() {
            beep.play(); //plays beep WAV
        }

        this.countUp = function() {
            this.count++;
            document.getElementById("counter").innerHTML = this.count; 
        }

    }

    var workout1 = new workout()

• javascript
• object
• timer
• setinterval
• anonymous-function

Share Improve this question Follow asked May 17, 2013 at 13:51 armadadrivearmadadrive 98133 gold badges1414 silver badges4444 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Inside startWorkout use bind(this) :

this.timerCounter = setInterval(function() {this.countUp()}.bind(this), 1000);

What happens is setInterval is changing the value of this inside the function you provide for it to call. You need to store this in a separate variable to prevent it from getting overridden.

function workout() {
    var self = this;
    // ...

     this.startWorkout = function() {
            alert(this.count);
            this.timerWorkout = setTimeout(self.playBeep, 30 * 1000); // this method works
            this.timerCounter = setInterval(function() {self.countUp}, 1000); // so does this one
     }
}

The reason that the variable scope in js is limited on function. So when you are trying to use this inside a nested function, you get a link to another object. Create a variable var that = this; into a higher-level function, and then use it in any nested function that would refer you to the correct context.