的Javascript計時器不更新

Question

我知道一百萬的JavaScript計時器的問題已經問了，但我不知道這一個了。

的#drive元件被更新在第一時間（到0），但不經過，作爲如果任setTimeout()不工作或this.count++不工作。任何人都知道爲什麼這不起作用？

謝謝...

var timer = { 
    timerRunning: false, 
    count: 0, 
    delay: 1000, 

    tick: function() { 
     $("#drive").html(this.count); 
     this.count++; 
     setTimeout(function(){ 
      if (this.timerRunning) 
       this.tick(); 
     }, this.delay); 
    }, 

    start: function() { 
     this.timerRunning = true; 
     this.tick(); 
    }, 

    stop: function() { 
     this.timerRunning = false; 
    } 
}; 

timer.start(); 

Answer 1

的this您setTimeout()回調內部的價值不再是你的計時器對象（這將是window對象）。這就是爲什麼它不工作。

您可以通過封閉變量設置爲你的對象和使用，而不是修復它像這樣：

tick: function() { 
    $("#drive").html(this.count); 
    this.count++; 
    var self = this; 
    setTimeout(function(){ 
     if (self.timerRunning) 
      self.tick(); 
    }, this.delay); 
}, 

Answer 2

回調綁定到不同的這個變量。這是一個解決方法：

tick: function() { 
     var self = this; 
     $("#drive").html(this.count); 
     this.count++; 
     setTimeout(function(){ 
      if (self.timerRunning) 
       self.tick(); 
     }, this.delay); 
    }