Javascript定時器不會改變狀態

Question

我想爲這個遊戲做一個定時器，每1000毫秒會從30秒開始倒計時，但是當我運行代碼時，定時器確實會改變;它停留在30

這裏是代碼我使用：

var gameTimer = { 
    time: 30, 
    interval: undefined, 
    start: function(time) { 
     var self = this; 
     this.interval = setInterval(tick, 1000); 
    }, 
    tick: function() { 
     this.time = this.time - 1; 
    }, 
    stop: function(time){ 
     clearInterval(this.interval); 
    }, 
    reset: function(){ 
     this.time = 30; 
    } 
}; 

是否有人可以幫助我嗎？從這個

Answer 1

變化：

this.interval = setInterval(tick, 1000); 

這樣：

this.interval = setInterval(this.tick.bind(this), 1000); 

的問題是，當你通過tick給setInterval，當tick()被稱爲對象引用丟失，因此this有錯誤的價值。由於錯誤的this值，您最終可能會更改名爲time的全局變量。

通過this.tick.bind(this)導致this指針被tick()由間隔調用時正確設置，因此該方法中的this.time引用正常工作。如果你在嚴格模式下工作，你的錯誤將會被運行時間指出給你，因爲this本來是undefined，而不是window（嚴格模式的原因之一）。

Answer 2

像這樣做，而不是

var gameTimer = function() { 
    this.time = 30; 
    this.interval; 

    this.start = function() { 
     self = this; 
     this.interval = setInterval(this.tick.bind(this), 1000); 
     console.log(this.interval); 
    }; 
    this.tick = function() { 
     console.log(this.time); 
     this.time = this.time - 1; 
    }; 
    this.stop = function(){ 
     clearInterval(this.interval); 
    }; 
    this.reset = function(){ 
     this.time = 30; 
    }; 
}; 
var timer = new gameTimer(); 
timer.start(); 

小提琴演示http://jsfiddle.net/jL2jc4jr/

在代碼示例中，我並沒有把代碼塞，但我認爲你可以做到這一點從在這一點上。享受你的遊戲計時器。