jQuery/JavaScript:当tab变为非活动状态时,我的递归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)在标签变为非活动状态时大幅减慢重复定时器,然后当标签再次激活时,它们会尝试"赶上",以便发生相同数量的实际定时器事件.所有我能想到的解决方法是让你在选项卡处于非活动状态时完全停止幻灯片放映,并在活动时再次启动它.