javascript - jQuery/JavaScript : My recursive setTimeout function speeds up when tab becomes inactive

Question

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

这没什么特别的，我迄今为止编写的代码运行良好，但我注意到，当我离开网站运行并切换到新选项卡并继续在另一个选项卡中浏览网页时 (Mac 版 Chrome在我的例子中)，当我返回我的站点时，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 计时器已减少为立即调用，现在动画完成时下一个动画开始时没有延迟全部。

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

感谢阅读，

詹尼斯

Answer 1

一些浏览器(例如Chrome)在选项卡进行不活动时会大大降低重复的计时器，然后当标签再次活跃时，它们尝试“ catch ”，以便发生相同数量的实际计时器事件。我能想到的解决方法是让您在选项卡处于非事件状态时完全停止幻灯片放映，并在它处于事件状态时重新开始。