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

Question

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

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

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

我不能使用 Javascript class 因为我不能假设所有浏览器都支持 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;
    }  
};

请注意，您可以轻松地将其转换为 class 之类的 函数：

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

我认为您没有将 decrementTimer() 绑定到 setInterval() 函数中。

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

如果您不熟悉这个话题，请关注此 link。我认为它会对你有所帮助。

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

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

How to you make a Javascript object's method call setInterval with an object method as an argument

javascript

methods

setinterval

countdown