setTimeout使用多个选项卡加速

Question

我有一个与此类似的setTimeout问题.但是这个解决方案对我没用,因为我不能在我的文件中使用php.

我的网站有一个滑块,其中包含每8秒移动一次的图像列表.但是,当我在浏览器中打开一些选项卡然后再切换回来时,它就变得疯狂了.滑块继续一个接一个地移动图像而没有8秒的时间延迟.

我只在Chrome和最新的Firefox中看到它.

**编辑:我检查了console.log(),并且setTimeout在clearTimeout之前和之后返回相同的数字.不知道为什么.也许这也与它有关？**

编辑2:我添加了一个小提琴:http://jsfiddle.net/Rembrand/qHGAq/8/

代码看起来像:

spotlight: {
    i: 0,
   timeOutSpotlight: null,

   init: function()
   {
       $('#spotlight .controls a').click(function(e) {

           // do stuff here to count and move images

           // Don't follow the link
           e.preventDefault();

           // Clear timeout
           clearTimeout(spotlight.timeOutSpotlight);

           // Some stuff here to calculate next item

           // Call next spotlight in 8 seconds
           spotlight.timeOutSpotlight = setTimeout(function () {
                spotlight.animate(spotlight.i);
            }, 8000);
       });

       // Select first item
       $('#spotlight .controls a.next:first').trigger('click');
   },

   animate: function(i)
   {
       $('#spotlight .controls li:eq(' + (spotlight.i) + ') a.next').trigger('click');
   }
}

Answer 1

从jQuery文档:

由于requestAnimationFrame()的性质,您不应该使用setInterval或setTimeout循环对动画进行排队.为了保留CPU资源,支持requestAnimationFrame的浏览器在不显示窗口/选项卡时不会更新动画.如果在动画暂停时继续通过setInterval或setTimeout对动画进行排队,则当窗口/选项卡重新获得焦点时,所有排队的动画将开始播放.要避免这个潜在的问题, 请在循环中使用上一个动画的回调,或者将函数附加到元素.queue()以设置超时以开始下一个动画.

Answer 2

我终于找到了答案,而这完全不是我所期待的.似乎罪魁祸首是jQuery的.animate(),我用它来移动滑块中的图像.

我计算并移动我的图像位置:

$('.spotlight-inner')
    .animate(
        { left: scrollToVal },
        {duration: 'slow'}
    )
 ;

现在问题似乎是在某些浏览器中,在切换到新选项卡并返回之后,jQuery的.animate()会保存动画并立即将它们全部触发.所以我添加了一个过滤器以防止排队.该解决方案来自CSS-Tricks.com:

$('.spotlight-inner')
    .filter(':not(:animated)')
    .animate(
        { left: scrollToVal },
        {duration: 'slow'}
    )
;

你回去时看到的第一张幻灯片可能会有点跳跃,但它比之前的超高速旋转木马更好.

在这里摆弄完整的代码