如何使用对象方法作为参数使Javascript对象的方法调用setInterval

Question

I am trying to create a generic countdown timer object in Javascript I have a method (decrementTimer) that reduces the timeLeft on counter by a fixed amount and another method which uses setInterval to call decrementTimer method.

The problem is that the code only runs once not every second. It looks like setInterval isn't putting the decrementTimer function on the queue inside my object.

I have tried making javascript do an Eval by putting the keyword "window" in front of the setIntervalfunction call but this doesn't work.

I can't use a Javascript class because I can't assume that all browsers support ECMAScript 6. I am using IE11.

I have also found solutions that work when you are doing this in a function but no examples of how to make this work in an object.

I would appreciate some help.

<script>
var myTimer = {
    timeLeft:       10,
    timerJobNumber: null,  
    decrementTimer: function(){
    alert("decrementTimer called. timeLeft = " + this.timeLeft);
    this.timeLeft = this.timeLeft - 1;
        if(this.timeLeft<0){
            alert("done");
        }
    },
    startTimer: function(){
    alert("startTimer called");
    this.timerJobNumber = window.setInterval(this.decrementTimer(),10);
    alert("Interval Job Number = " + this.timerJobNumber);
               },

    stopTimer: function(){
    clearInterval(this.timerJobNumber);
    alert(this.timerJobNumber);
    alert("job terminated");
    },

    resetTimer: function(initialTime){
    this.TimeLeft = initialTime;
    alert("intitialTime="+intitialTime);
    },
    getTimeLeft: function(){
        return this.timeLeft;
    }  
};

console.log(myTimer.getTimeLeft());
console.log(myTimer.startTimer() );
console.log(myTimer.getTimeLeft());

</script> 

Answer 1

I didn't really check all of your code, but this seems to do what you want :

var myTimer = {
    timeLeft:       10,
    timerJobNumber: null,  
    decrementTimer: function(){
        console.log("decrementTimer called. timeLeft = " + this.timeLeft);
        this.timeLeft = this.timeLeft - 1;
        if(this.timeLeft<0){
            this.stopTimer();
        }
    },
    startTimer: function(){
        this.timerJobNumber = window.setInterval(this.decrementTimer.bind(this),1000);
        console.log("Interval Job Number = " + this.timerJobNumber);
    },

    stopTimer: function(){
        clearInterval(this.timerJobNumber);
        alert(this.timerJobNumber);
    },

    resetTimer: function(initialTime){
        this.TimeLeft = initialTime;
        alert("intitialTime="+intitialTime);
    },
    getTimeLeft: function(){
        return this.timeLeft;
    }  
};

Note that you can easily transform this into a class like function :

var MyTimer = function() {
    this.timeLeft = 10;
    this.timerJobNumber = null;
};

MyTimer.prototype.decrementTimer = function() {
    console.log("decrementTimer called. timeLeft = " + this.timeLeft);
    this.timeLeft = this.timeLeft - 1;
    if(!this.timeLeft > 0)
        this.stopTimer();
};

MyTimer.prototype.startTimer = function() {
    this.timerJobNumber = window.setInterval(this.decrementTimer.bind(this),1000);
    console.log("Interval Job Number = " + this.timerJobNumber);
};

MyTimer.prototype.stopTimer = function() {
    clearInterval(this.timerJobNumber);
    alert(this.timerJobNumber);
};

MyTimer.prototype.resetTimer = function(initialTime) {
    this.timeLeft = initialTime;
    alert("intitialTime="+intitialTime);
};

MyTimer.prototype.getTimeLeft = function() {
    return this.timeLeft;
};

//...

var m = new MyTimer();
m.startTimer();

Answer 2

I think you don't bind your decrementTimer() inside the setInterval() function.

startTimer: function(){
    alert("startTimer called");
    this.timerJobNumber = window.setInterval(this.decrementTimer.bind(this),10);
    alert("Interval Job Number = " + this.timerJobNumber);
}

if you are not familiar this topic, then follow this link. I think it will help you.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind