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 ing 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?

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 ing 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?

• javascript
• jquery
• google-chrome
• settimeout

Share Improve this question Follow edited Jan 27, 2012 at 21:15 TimWolla 32.8k88 gold badges6666 silver badges9797 bronze badges asked Jan 27, 2012 at 21:10 M2_M2_ 31744 silver badges1414 bronze badges 1

• There is something called requestAnimationFrame that will pause when the tab isn't in the foreground, but it's not widely supported. Here's an article about it: hacks.mozilla/2011/08/… – gen_Eric Commented Jan 27, 2012 at 21:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

Chrome, Firefox and IE10 have page visibility APIs that you can use to determine when you page is no longer visible. This works better than using focus in some circumstances. Here's an example from MDN:

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

And, some reference documents:

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

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

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

The only work-arounds I've seen for older browsers involve determining whether your window has focus or not which isn't perfect, but maybe better than nothing in some cases.