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

Question

在我正在构建的这个 jQuery 幻灯片插件中，我遇到了一个奇怪的小困境。

这没什么花哨的，我迄今为止编写的代码运行得很好，但是我注意到，当我让网站运行并切换到新选项卡并继续在另一个选项卡中浏览网页时（在我的例子中是 Chrome for Mac） ） 当我返回站点时，setTimeout 调用似乎加快了速度，并且不是等待计时器完成触发事件，而是连续触发。

这是我的（简化的）代码：

var timer;
var counter;
var slides; // collection of all targeted slides.

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

    // stop timer
    methods.stopTimer();

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

    // 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 : startTimer()
    });


}
// timer functions.
function startTimer() {
    if ( timer === '' ) {
        timer = setTimeout( function() {
            nextSlide();
        } , 3000 );
    }
}
function stopTimer() {
    clearTimeout( timer );
    timer = '';
}

所以应该发生的是，在动画结束时，计时器重新连接另一个 setTimeout 调用，以便它成为连续的幻灯片（在您离开选项卡之前，这一切都很好。

一旦您离开选项卡并返回带有幻灯片的选项卡，3000 ms 计时器似乎已减少到立即调用，现在是动画的时刻完成下一项立即开始 任何关于

为什么会发生这种情况以及如何解决的想法都将非常感谢

您的阅读，

Jannis 。

Answer 1

当选项卡变为非活动状态时，某些浏览器（如 Chrome）会大大减慢循环计时器的速度，然后，当选项卡再次活动时，它们会尝试“赶上”，以便发生相同数量的实际计时器事件。我能想到的解决方法是，当选项卡变为非活动状态时完全停止幻灯片放映，并在选项卡变为活动状态时重新启动幻灯片。

Answer 2

您是否尝试过间隔而不是超时？另外，为了使其递归，只需调用 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();
}