切换标签后丢失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值

回答

相关问题