在javascript中使用setTimeout做簡單的動畫

我使用setTimeout在Javascript中創建動畫，但它似乎不工作。只有動畫的第一個動作被執行，沒有後續動作。在javascript中使用setTimeout做簡單的動畫

我嘗試過使用Firefox的兩個不同的筆記本電腦，其中一個不會引發任何錯誤，但是一個說self.animateCallback is not a function。我還看到其他錯誤，比如說我的超時函數是無用的，或者當我嘗試差異方式時，「編譯並行」。似乎沒有得到它的工作。我試過"function(self){self.animateCallback()}"和"self.animateCallback"（有和沒有引號）。

代碼如下，它是原型方法的一部分。

increment : function(incr, target, tick) { 
    var self = this; 

    self.animateCallback = function() 
    { 
     var done = Math.abs(self.currValue - target) < Math.abs(incr); 
     if(!self.animateCallback || done) { 

      if(done) { 
       self.updateAngle(self.currValue/self.maxValue); 
       self.stopAnimation(); //just setting animateCallback to null 
      } 
     } 
     else 
     { 
      self.updateAngle((self.currValue+incr)/self.maxValue); 
      setTimeout(self.animateCallback, tick); 
     } 

    } 
    self.animateCallback.call(); 
},

來源

2011-11-03 yeeen

我們需要看到更多的代碼，知道什麼是錯的。很顯然，有些東西與這個，self或self.animateCallback混淆，因爲如果其中一個沒有被混淆，代碼不應該有你報告的問題。 – jfriend00

我有一種感覺，這個問題與setTimeout(self.animateCallback...行有關，它通過閉包和屬性訪問函數。它應該是簡潔，至少，做這樣的：

increment : function(incr, target, tick) { 
    var self = this; 

    var animateCallback = function() 
    { 
     var done = Math.abs(self.currValue - target) < Math.abs(incr); 
     if(done) { 
      self.updateAngle(self.currValue/self.maxValue); 
      self.animateTimeout = null; 
     } 
     else 
     { 
      self.updateAngle((self.currValue+incr)/self.maxValue); 
      self.animateTimeout = setTimeout(animateCallback, tick); 
     } 

    } 
    animateCallback(); 
}, 
stopAnimation: function() { 
    if (this.animateTimeout) { 
     clearTimeout(this.animateTimeout); 
     this.animateTimeout = null; 
    } 
},

來源

2011-11-03 03:18:12

我也是指tt行。在你的建議中，似乎stopAnimation不是必需的。我最後做的是做self.timer = setTimeout（function（obj）{obj.animateCallback.call（）};），tick，self）; – yeeen

-1

試圖通過一個匿名函數來setTimeout，像

setTimeout(function(){ self.animateCallback(); }, tick);

希望能對大家有所幫助。

來源

2011-11-03 03:05:51

這不是必需的，因爲'self.animateCallback（）'已經是一個函數了。一個不需要'setTimeout（）'的匿名函數。 – jfriend00

我認爲錯誤是，一些其他的代碼被改變self.animateCallback別的東西的價值。 setTimeout第一次具有self.animateCallback的正確值，但在第一次之後，self.animateCallback的值已更改爲其他值，但這不是函數，但仍爲非僞值，因此!self.animateCallback返回false。

你可以嘗試改變if語句這樣：

if((typeof self.animateCallback !== "function") || done) { 

    if(done) { 
     self.updateAngle(self.currValue/self.maxValue); 
     self.stopAnimation(); //just setting animateCallback to null 
    } 
}

來源

2011-11-03 03:36:02 Na7coldwater

在javascript中使用setTimeout做簡單的動畫

回答

相關問題