javascript - 递归 setTimeout() 在后台暂停

Question

我有一段代码:

var logo = $("#blinking-logo");
function logo_blink() {
    logo.fadeOut(10).delay(10)
        .fadeIn(10).delay(20)
            .fadeOut(10).delay(10)
            .fadeIn(10)
    window.setTimeout(logo_blink, (Math.random()*(1500))+1500);
}
logo_blink();

它所做的只是每大约 30 秒闪烁一次图片(这里的时间更短以便于调试)

Chrome 在背景中的选项卡时停止此计时器的问题，然后，回到该标签时，它会眨眼在背景中错过的所有眨眼。

我想在后台暂停计时器，但我不知道该怎么做。我读过一些相关的帖子，但它们似乎描述了相反的问题。有什么方法可以检测标签的背景吗？

Answer 1

这是一个已知的功能。为了节省资源，Chrome 不会在没有焦点的情况下更新窗口 :) 例如，您可以检查该窗口失去焦点并停止计时器。当窗口处于焦点时再次启动它。例如:

var timer = null;
var logo = $("#blinking-logo");
function logo_blink() {
    if(timer) clearTimeout('timer');
    logo.fadeOut(10).delay(10)
        .fadeIn(10).delay(20)
            .fadeOut(10).delay(10)
            .fadeIn(10)
    timer = window.setTimeout(logo_blink, (Math.random()*(1500))+1500);
}
logo_blink();
$(window).blur(function(){clearTimeout(timer); timer = null;});
$(window).focus(function(){if (!timer) timer = window.setTimeout(logo_blink, (Math.random()*(1500))+1500);});

是这样的。在我的一个带有动画的页面上，setInterval 遇到了同样的问题，所以我只是在页面处于后台时暂停它。

if (!$.browser.msie)
{
    $(window).focus(function(){paused = false;});
    $(window).blur(function(){paused = true;});
}

并且根据暂停标志的值跳过动画。

ps:代码已通过下面讨论的优化进行了更新。