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

Question

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

问题是代码只运行一次，而不是每秒运行一次。看起来setInterval并没有将递减计时器函数放在对象内的队列上。

我曾尝试通过在setIntervalfution调用前面放置关键字"window"来使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();

Answer 2

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

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