рекурсивная setTimeout () пауза на фоне - PullRequest
Новая
       42

рекурсивная setTimeout () пауза на фоне

3 голосов
/ 28 января 2012

У меня есть кусок кода: 

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приостанавливает этот таймер, пока вкладка находится в фоновом режиме, а затем, возвращаясь к этой вкладке, он мигает всеми миганиями, пропущенными в фоновом режиме.не знаю какЯ прочитал несколько похожих постов, но похоже, что они описывают противоположную проблему.Есть ли способ определить фон вкладки?

Ответы [ 2 ]

3 голосов
/ 28 января 2012

Chrome, Firefox и IE10 имеют API видимости страницы, которые можно использовать, чтобы определить, когда страница больше не видна.Это работает лучше, чем использование фокуса в некоторых обстоятельствах.Вот пример из MDN: 

//startSimulation and pauseSimulation defined elsewhere
function handleVisibilityChange() {
    if (document.hidden) {
        pauseSimulation();
    } else  {
       startSimulation();
    }
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);

И некоторые справочные документы:

http://code.google.com/chrome/whitepapers/pagevisibility.html

https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API

W3 Document: http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html

Единственные обходные пути, которые я видел для старых браузеров, включают определение того, имеет ли ваше окно фокус или нет, что не идеально, но, возможно, лучше, чем ничего в некоторых случаях.

3 голосов
/ 28 января 2012

Это известная функция.Для сохранения ресурсов 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);});

Примерно так.На одной из моих страниц с анимацией a была та же проблема с setInterval, поэтому я просто приостановил ее, когда страница была в фоновом режиме.*

ps: код обновлен с оптимизацией, обсужденной ниже.

...