setTimeout使用多个选项卡加快速度

setTimeout speeds up with multiple tabs

本文关键字：速度 选项 setTimeout      更新时间：2023-09-26

我遇到了一个类似于此的setTimeout问题。但是这个解决方案对我没有帮助，因为我不能在文件中使用php。

我的网站有一个滑块，上面有一个每8秒移动一次的图像列表。然而，当我在浏览器中打开几个选项卡，然后再次切换回来时，它就疯了。滑块继续立即一个接一个地移动图像，没有8秒的时间延迟。

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

**EDIT：我使用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');
   }
}

来自jQuery文档：

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

我终于找到了答案，但这根本不是我所期望的。罪魁祸首似乎是jQuery的.animate（），我用它来移动滑块中的图像。

我用这个计算和移动我的图像位置：

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

现在的问题似乎是，在一些浏览器中，当您切换到一个新的选项卡并返回后，jQuery的.animate（）会保存动画并同时启动它们。所以我添加了一个过滤器来防止排队。该解决方案来自CSS-Tricks.com:

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

当你回去的时候，你看到的第一张幻灯片可能会有点跳跃，但它比以前的超高速旋转木马要好。

在这里摆弄完整的代码

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

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

我不知道这是否会对你有所帮助，但它对我的幻灯片放映有所帮助。我所做的是，每次我调用一个由于setTimeout而应该以设置的间隔发生的动画时，我都会调用clearQueues（），它会去掉任何其他设置为发生的动画。然后我会称之为动画。这样，当你回到那个选项卡时，你就不会有所有这些动画排队，这会变得疯狂。最多只能设置一个。

这样的东西：

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

它可能不是在所有情况下都有效（取决于时间），但我希望这能帮助到一些人！

您还必须考虑使用clearTimeout。

当您调用setTimeout函数时，它会返回一个ID，您可以将该ID保存在类似的变量中

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

在设置新的超时之前，您可以调用类似的函数

clearTimeout(timeoutID)

我怀疑浏览器会将"点击"等输入事件排队，但只有当事件发生的选项卡真正有焦点时才会触发它们。

也许您应该尝试直接调用单击回调，而不是使用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);
   }
}

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

尽管这个问题将来可能需要解决，但我们现在似乎已经摆脱了困境。

相关文章：