Setinterval animated

Question

我遇到問題。如果某種變量爲真，我想每秒檢查50次。如果這是真的，我們需要做1秒的背景轉換。我做了這樣的：

setInterval(
     function(){ 


      if(var) { 
        $('.side-bar').animate({ 
         backgroundColor: "#fff" 
         }, 1000); 
      } 
      else { 
      $('.side-bar').animate({ 
         backgroundColor: "#000" 
         }, 1000); 
      } 
      },20); 

的問題是，如果無功是真的，因爲某種原因的動畫會卡住，而且它不能再更改。如果我們使間隔時間大於動畫時間（例如間隔1001和動畫1000），它確實有效。當間隔時間<動畫時間，它不起作用。誰知道這個解決方案？

Answer 1

每次您的功能運行時，它都會嘗試啓動兩個動畫中的一個或另一個。 jQuery將後續的動畫調用排隊。因此，在你的函數運行了50次之後的一秒鐘內，你已經排隊了50個動畫，其中第一個將完成。

我並不真的建議在變量上進行這種輪詢，最好是直接從任何代碼集變量觸發動畫，但要通過當前的問題，您可以檢查當前是否存在動畫在進步，如果是的話什麼都不做：

setInterval(function() { 
    var $sidebar = $('.side-bar'); 
    if ($sidebar.is(':animated')) return; 
    if (condition) { 
     $sidebar.animate({ 
      backgroundColor: "#fff" 
     }, 1000); 
    } else { 
     $sidebar.animate({ 
      backgroundColor: "#000" 
     }, 1000); 
    } 
}, 20); 

演示：http://jsfiddle.net/yXWPD/

但即使如此，你仍然可以不斷重新動畫同樣的事情，你就不會排隊超過一個動畫一次。有沒有必要排隊另一個動畫，除非條件變量實際上已經改變了：

var condition = false; // your condition var, that is set true by some 
         // other code somewhere 

var prevCondition, 
    $sidebar = $('.side-bar'); 
setInterval(function() { 
    if (prevCondition != condition && !$sidebar.is(':animated')) { 
     prevCondition = condition; 
     $sidebar.animate({ 
      backgroundColor: condition ? "#fff" : "#000" 
     }, 1000); 
    } 
}, 20); 

演示：http://jsfiddle.net/yXWPD/2/

但同樣，這個投票的概念是不是最好的一段路要走。您應該從更改變量的代碼觸發動畫。