如何使用對象方法作為參數使Javascript對象的方法調用setInterval

Question

我試圖在Javascript中創建一個通用的倒數計時器對象，我有一個方法（decrementTimer）可以將timeLeft減少固定的數量，另一個方法是使用setInterval調用decrementTimer方法。

問題在於代碼僅每秒運行一次。 看起來setInterval並未將decrementTimer函數放在對象內部的隊列中。

我試圖通過將關鍵字“ window”放在setIntervalfunction調用前面來使javascript進行Eval，但這不起作用。

我不能使用Javascript類，因為我不能假定所有瀏覽器都支持ECMAScript6。我正在使用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;
    }  
};

請注意，您可以輕松地將其轉換為類似 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

我認為您不會在setInterval()函數內綁定您的decrementTimer() 。

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

如果您不熟悉此主題，請單擊此鏈接。 我認為它將為您提供幫助。

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