Javascript 切换选项卡后丢失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在我切换浏览器上的选项卡后重置，最终所有列都同时设置动画。我也尝试了几乎所有我在这里找到的解决方案，但似乎找不到一种方法来让它工作。我已经研究了一段时间，我认为解决方案可能很简单，但我就是看不到。谢谢

---

浏览器会优化电池寿命，并在您关机后“合并”设置超时。我怀疑（但不能100%确认）这就是这里发生的事情

要解决这个问题，您需要使用CSS动画和/或转换，它们具有更好的计时效果

您需要重写

slidemageup

函数以使用CSS，将其绑定到一个类（例如

slide up

），然后将该类添加到元素中

有了CSS动画和转换的强大功能、性能和硬件加速，您几乎不应该用JS编写这些代码

有关详细信息，请参阅：

---

换一种方式就行了。每3秒，在适当的时间设置所有徽标的超时

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

---

很好的工作发布了一个工作JSFIDLE+1Wow，这很简单！非常感谢。老实说，我花了一段时间才想出CSS中的概念，所以我改用jQuery，因为我知道我可以超快速地完成它，但后来我遇到了setTimeout问题。这次我确实走了一条简单的路。谢谢你的建议。