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

我有一个类似于的设置超时问题。但是这个解决方案对我没有帮助，因为我不能在我的文件中使用php

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

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

**编辑：我使用console.log（）进行了检查，setTimeout在clearTimeout前后返回相同的数字。不知道为什么。也许这也与此有关**

编辑2：我添加了一把小提琴：

代码如下所示：

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');
   }
}

---

您还必须认为您使用了clearTimeout

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

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

在设置新的超时之前，可以调用如下函数

clearTimeout(timeoutID)

---

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

也许您应该尝试直接调用click回调，而不是使用

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

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

---

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

我使用以下方法计算并移动图像位置：

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

现在的问题似乎是，在某些浏览器中，在切换到新选项卡并返回后，jQuery的.animate（）会保存动画并立即启动它们。所以我添加了一个过滤器来防止排队。这些解决方案来自：

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

从以下位置拨弄完整代码

：

因为生命的本质，你不应该 使用setInterval或setTimeout循环对动画进行排队。为了 保留CPU资源，支持requestAnimationFrame的浏览器 当窗口/选项卡未显示时，将不会更新动画。如果 继续通过setInterval或setTimeout对动画进行排队 动画暂停后，所有排队的动画将开始播放 当窗口/选项卡恢复焦点时。为了避免这一潜在问题， 使用循环中最后一个动画的回调，或附加一个 函数调用elements.queue（）以设置启动下一个队列的超时时间 动画

---

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

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

---

我不知道这是否对你有帮助，但它对我的幻灯片放映有帮助。我所做的是，每次我调用一个动画，由于setTimeout，该动画应该在设定的时间间隔内发生，我调用clearQueue（），它将删除任何其他设置为发生的动画。然后我会叫动画。这样，当您回到该选项卡时，您就不会让所有这些动画排队，而且它会变得疯狂。在max，您只能设置一个

比如说：

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

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

---

它可能不会在所有情况下都起作用（取决于时间安排），但我希望这对某些人有所帮助

您正在运行哪个版本的jQuery？显然，1.6.3版“修复”了此问题-他们恢复了导致此情况发生的更改。讨论和讨论

---

尽管这个问题可能在将来会得到解决，但现在看来我们似乎已经脱离了困境。

只有打开同一站点的新选项卡，或者打开任何新选项卡并切换回来，才会发生这种情况吗？只是任意站点的随机选项卡。多么有趣。一些额外的测试可以帮助您了解发生了什么-在回调期间，如果您使用console.log记录datetime以查看代码命中的实际间隔-是否为8秒？而且，如果您离开页面长达X秒，您是否看到给定时间内正确的控制台日志记录事件？如果您继续努力解决这个问题，我建议您复制它并将其发布到此处。fiddle补充道：我尝试了您的代码（顺便说一下，感谢您的撰写），但结果仍然是一样的。不过，您可能会通过发出咔嗒声了解到一些事情。我刚注意到滑块在一段时间后恢复到正常速度。看起来浏览器确实在保存点击，直到您重新关注选项卡，然后它一次运行所有点击。我刚刚使用console.log（）进行了检查，setTimeout在clearTimeout前后返回相同的数字。不知道为什么。也许这也与此有关？根据日志的数量判断，在我离开选项卡并返回后，控制台会继续记录这些消息。感谢您返回并发布您的答案。真有趣！你救了我几个小时的拔头发！！我想说这帮了我很多忙，谢谢你发布你的解决方案我上面的答案更正确，但是如果你已经有很多依赖于超时的函数，那就很难做到了。这是个好消息。这是jQuery的早期版本，但我们应该记住davydepauw的答案，以防它再次出现。这确实是一段更短、更简单的代码。谢谢分享！