切換標籤後丟失setTimeout值

我有幾列標誌，我想運行一個函數，在每列上動畫標誌但不是在同一時間，我希望在函數運行時間每列。這裏是我的代碼：切換標籤後丟失setTimeout值

var startRotation = function() { 
    $(".ticker").each(function(index, element){ 
    myInterval = setTimeout(function() { 
     otherInterval = setInterval(function(){ 
     slideImageUp(element); //runs function to animate 
     }, 3000); 
    }, 1000 * index); 
    }); 
};

問題是setTimeout的重置後，我打開瀏覽器選項卡，並最終列都在同一時間動畫。我也嘗試了幾乎所有我在這裏找到的解決方案，並且似乎無法找到使其工作的方法。我一直在研究它一段時間，我認爲解決方案可能很簡單，但我無法看到它。謝謝。

https://jsfiddle.net/dae0L0qu/3/

來源

2015-12-02 gazelle

尼斯工作發佈工作的jsfiddle +1 – Oleander

只要做到這一點的其他方式。每3秒鐘，在適當的時間爲所有標誌設置超時。

var startRotation = function() { 
    otherInterval = setInterval(function(){ 
     $(".ticker").each(function(index, element){ 
     myInterval = setTimeout(function() { 
      slideImageUp(element); //runs function to animate 
     }, 1000 * index); 
     }); 
    }, 3000); 
};

來源

2015-12-02 23:46:27

哇，這個簡單！謝謝！ – gazelle

瀏覽器優化了電池壽命，並且將「合併」你的下一個定時器，你切換出來後。我懷疑（但不能100％確認）這是發生在這裏。

要解決這個問題，您需要使用CSS動畫和/或轉換，它們有更好的時機。

您需要將slideImageUp函數重寫爲使用CSS，將其綁定到類（例如slide-up），然後將該類添加到元素。

隨着CSS動畫和轉換的功能，性能和硬件加速，你幾乎不應該用JS編寫這些代碼。

欲瞭解更多信息，請參見：

來源

2015-12-02 23:41:51 apscience

老實說，有人帶我一段時間才能拿出在CSS的概念，所以我切換到jQuery的，因爲我知道我可以把它做超級快，但後來我陷入了setTimeout問題。這次我肯定走了這條輕鬆的路線。感謝您的建議，但。 – gazelle

切換標籤後丟失setTimeout值

回答

相關問題