Question

我有几列徽标，我想运行一个函数来动画每列上的徽标，但不是同时，我希望在函数运行每列之间有一个延迟。这是我的代码：

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/

Answer 1

就这样做吧。每3秒钟，在适当的时间为所有徽标设置超时。

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

Answer 2

浏览器可以优化电池续航时间，并且可以＆＃34;合并＆＃34;切换后你的setTimeouts。我怀疑（但不能100％确认）这就是这里发生的事情。

要解决此问题，您需要使用具有更好时序的CSS动画和/或过渡。

您需要重写slideImageUp函数以使用CSS，将其绑定到类（例如slide-up），然后将类添加到元素中。

通过CSS动画和过渡的功能，性能和硬件加速，您几乎不应该在JS中编写这些代码。

有关详细信息，请参阅：

切换标签后丢失setTimeout值

2 个答案: