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

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

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

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

2 个答案: