Question

I have a piece of code:

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();

All it makes is blinking a picture once in ~30 seconds (time is less here for easier debugging)

The problem that Chrome pauses this timer while the tab in backgrounded, and then, when coming back to that tab, it blinks all the blinks that were missed in background.

I’d like to pause the timer while in background, but I don’t know how. I’ve read some related posts, but it seems that they describe the opposite problem. Is there any way to detect the backgrounding of a tab?

Answer 1

It is a known feature. To conserve the resources Chrome does not update the window without focus 🙂 You could check, for example, that window lost its focus and stop the timer. Start it again when window is in focus. For example:

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);});

Something like this. On one of my pages with animation a had the same problem with setInterval, so I just pause it when the page is in background.

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

And than skipped animation based on the value of paused flag.

ps: Code is updated with optimization discussed below.