setTimeout 通过多个选项卡加快速度

Question

我遇到类似于 这个。但该解决方案对我没有帮助，因为我无法在文件中使用 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 对动画进行排队，同时
动画暂停，所有排队的动画将开始播放
当窗口/选项卡重新获得焦点时。为了避免这个潜在的问题，
在循环中使用最后一个动画的回调，或者附加一个
函数到 elements.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'}
    )
;

返回时看到的第一张幻灯片可以表现有点紧张，但比以前的超高速旋转木马要好。

此处修改完整代码

Answer 3

使用 jquery animate 队列属性有一种更简单的方法：

$(this).animate({
    left: '+=100'
}, {duration:500, queue:false});

Answer 4

我不知道这是否对您有帮助，但它对我的幻灯片很有帮助。我所做的是，每次我调用一个由于 setTimeout 而应该在设定的时间间隔发生的动画时，我都会调用clearQueue()，这将消除已设置为发生的任何其他动画。然后我会调用动画。这样，当您返回该选项卡时，您就不会看到所有这些动画都排队，并且会变得疯狂。您最多只能设置一项。

所以像这样的事情：

       spotlight.timeOutSpotlight = setTimeout(function () {
            spotlight.clearQueue(); // get rid of other instances of the animation
            spotlight.animate(spotlight.i);
        }, 8000);

它可能不适用于所有情况（取决于时间），但我希望这对某人有帮助！

Answer 5

您还必须认为您使用了clearTimeout。

当您调用 setTimeout 函数时，它会返回一个 ID，您可以将此 ID 保存在变量中，例如

timeoutID = setTimeout(function () {
                spotlight.animate(spotlight.i);
            }, 8000);

，在设置新超时之前，您可以调用该函数，例如

clearTimeout(timeoutID)

Answer 6

我怀疑浏览器会将“单击”等输入事件排队，但仅在事件发生的选项卡实际具有焦点时才触发它们。

也许您应该尝试直接调用点击回调，而不是使用 trigger('click')。

像这样的东西：

spotlight: {
    i: 0,
   timeOutSpotlight: null,
   clickFunc: function(element) {

       // do stuff here to count and move images

       // 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);
   },

   init: function()
   {

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

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

           spotlight.clickFunc(this);
       });

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

   animate: function(i)
   {
       var element = $('#spotlight .controls li:eq('+spotlight.i+') a.next');
       spotlight.clickFunc(element);
   }
}

Answer 7

您运行的是哪个版本的 jQuery？显然这个问题在 1.6.3 版本中已经“修复”了——他们恢复了导致这种情况发生的更改。讨论此处和此处。

尽管这个问题将来可能必须得到解决，但目前看来我们已经摆脱了困境。