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

Question

我正在尝试在 Javascript 中创建一个通用倒计时器对象我有一个方法(decrementTimer)可以将计数器上的 timeLeft 减少固定量，另一个方法使用 setInterval 来调用 decrementTimer 方法。

问题是代码只运行一次而不是每秒运行一次。看起来 setInterval 没有将 decrementTimer 函数放在我的对象内的队列上。

我尝试通过将关键字“window”放在 setIntervalfunction 调用前面来使 javascript 执行 Eval，但这不起作用。

我无法使用 Javascript 类，因为我不能假设所有浏览器都支持 ECMAScript 6。我使用的是 IE11。

我还找到了在函数中执行此操作时有效的解决方案，但没有如何在对象中执行此操作的示例。

我希望得到一些帮助。

<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

我并没有真正检查你的所有代码，但这似乎符合你的要求:

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

请注意，您可以轻松地将其转换为类似函数的类:

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