切换标签后丢失 setTimeout 值答案

【问题标题】：Losing setTimeout value after I switch tabs切换标签后丢失 setTimeout 值
【发布时间】：2015-12-02 23:38:11
【问题描述】：

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

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/

【问题讨论】：

不错的工作发布了一个工作 jsfiddle +1

标签： javascript jquery

【解决方案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);
};

【讨论】：

哇，这么简单！谢谢！

【解决方案2】：

浏览器会针对电池寿命进行优化，并会在您关闭后“合并”您的 setTimeouts。我怀疑（但不能 100% 确认）这就是这里发生的事情。

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

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

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

有关详细信息，请参阅：

【讨论】：

老实说，我花了一段时间才想出 CSS 中的概念，所以我改用 jQuery，因为我知道我可以超快地完成它，但后来我被卡住了setTimeout 问题。这次我绝对选择了简单的路线。不过感谢您的建议。