jQuery/JavaScript：当选项卡变为非活动状态时，我的递归setTimeout函数会加快速度

在我正在构建的jQuery幻灯片演示插件中，我遇到了一个奇怪的小难题

这并不是什么新奇的东西，我迄今为止所写的代码运行得很好，但是我注意到当我离开网站运行并切换到一个新的选项卡，然后继续在另一个选项卡（我的例子中是Chrome for Mac）中浏览网页时，当我返回我的网站时，

setTimeout

调用似乎加快了速度，它没有等待计时器完成激发事件，而是连续激发

以下是我的（简化）代码：

因此，应该发生的是，在动画结束时，计时器会与另一个

setTimeout

调用重新连接，以便它成为一个连续的幻灯片放映（在您离开选项卡之前，这一切都很正常）

一旦您离开选项卡并使用幻灯片放映返回选项卡，则

3000 ms

计时器似乎已减少为立即调用，现在动画完成时，下一个计时器将毫不延迟地启动

任何关于为什么会发生这种情况以及如何解决它的想法都将不胜感激

谢谢你的阅读

---

Jannis

一些浏览器（如Chrome）在选项卡处于非活动状态时会大幅降低周期性计时器的速度，然后，当选项卡再次处于活动状态时，它们会尝试“追赶”因此，实际发生的计时器事件数相同。我所能想到的解决办法是，当选项卡处于非活动状态时，您可以完全停止幻灯片放映，当它处于活动状态时，您可以重新开始幻灯片放映。

您是否尝试过间隔而不是超时？同样，为了使其具有递归性，只需调用nextSlide（）函数作为其自己的回调：

var counter = 1;

// animate to the next slide
function nextSlide() {

    // increase counter
    counter++;

    // if counter is greater than the amount of slides, back to the start.
    counter =  ( counter > slides.length-1 ) ? 0 : counter;

    // inner = container to be animated
    // in the complete callback restart the timer.
    inner.animate(
    {
        'left': '-' + slides.eq( counter ).position().left
    }, 
    {
        duration : settings.animationSpeed,
        easing  : 'easeInOutExpo',
        complete : nextSlide()
    });

}

然后就是开始和停止一段时间间隔的问题：

var slideshow;
function startSlideshow()
{
    slideshow = setInterval(nextSlide(),3000);
}

function stopSlideshow()
{
    clearInterval(slideshow);
    inner.stop();
}

---

谢谢！我现在添加了一个全局开关

var stopped；

，它根据

$（窗口）触发
true/false
。模糊
或
$（窗口）.focus
效果很好。感谢您的评论，但是发布的代码非常简单，并且在完整插件的范围内
setInterval
，直接传递回调函数不会按照我需要的方式工作。不管怎样，谢谢。我还注意到您重写了
计数器=（）？：；
行，这有什么原因吗？性能？我知道这是一个旧线程，但可能对某些人有用…如果你使用
animate（）
，为什么不完全放弃超时呢？对我来说，下面的一段代码工作得很好（并且添加了你描述的问题）：
self.$rootElement.find（“#滚动的_项”）。延迟（self.delayTime）.动画（{left:'-'+self.current*Number（l-self.leftMargin）}，500，function（）{slideshow.auto（）.move（）}）；
。这是断章取义的，但我想你明白了。
var slideshow;
function startSlideshow()
{
    slideshow = setInterval(nextSlide(),3000);
}

function stopSlideshow()
{
    clearInterval(slideshow);
    inner.stop();
}