Does setTimeout() have issues when that window isn't focused?

Question

I'm working on a site that uses setTimeout() to do kind of a 'slideshow' with banners on my site. Everything works fine, I have the delay set to 10 seconds. The problem only occurs when I switch windows/tabs and do something else. When I come back, the function runs a ton of times I (assume) to catch up or something. Problem is, my screen starts flickering over and over to show all banners fading in and fading out.

Any ideas on a solution? I've noticed this in Google Chrome, I also know it happens in Firefox. Not sure about IE.

EDIT

Here is the snippet I'm dealing with. Sadly, it is part of a very large script and is connected to a very complicated HTML file.

I hope you can get an idea of what is going on here at least:

var lval=0;
var nval=1;
setHead = function(data) {
        lval=nval;
        var index=1;
        $.each(data, function(name,value) {
            if (Math.floor(Math.random()*index+2)==index+1) {
                nval=index;
            }
            if (index==lval) {
                $('.headmaster').find('img').fadeOut('fast');
                //$('.headmaster').css('background-color',value.backgroundcolor);
                $('.headmaster').find('a').attr('href',value.url);
                $('.headmaster').animate({backgroundColor:value.backgroundcolor},'slow',function() {
                    $('.headmaster').find('img').attr('src',value.img);     
                    $('.headmaster').find('img').fadeIn('slow');                                                                        
                });
            }
            index++;
        });
        setTimeout(function() { setHead(data); },10000);
}

arrayGet = function(arr,idx) {
    $.each(arr, function(i,v) {
        if (i==idx) {
            return v    
        }
    });
    return null
}

$(document).ready(function() {  
    $.getJSON('json/intros.json', setHead);
});

I'm using jQuery for the animation and the color plugin for fading the colors.

Have you checked on firebug to see how many calls is happening to your setTimeout function? Try to check this on the normal situation and after you change your tabs/windows. See if there's any abnormality on your function call. — AdrianoRR, Oct 06 '11 at 14:59
@AdrianoRR I've already made sure. As soon as the tab switches back, the function is called `timegone/timeoutlength` times. — Freesnöw, Oct 06 '11 at 15:03
Ok, can you provide us a snippet of your code or some example using your function? It will be easier to identify your problem. — AdrianoRR, Oct 06 '11 at 15:11
The newer browsers somehow suspend or slow down JavaScript execution when the page is not focused. See http://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs — Felix Kling, Oct 06 '11 at 15:13
that is only for really quick intervals though. 10 second timer shouldn't get suspended in background... adding another requestto see your code. — mattacular, Oct 06 '11 at 15:30
@FelixKling The answer to that post referenced another post, that post had an answer that I think may have just worked for me. I used .stop(true,true) for all the animated elements and it works perfectly now (I think, I'm still testing). Feel free to post that answer as an answer so I can possibly mark it (assuming the tests work, so far they look good). — Freesnöw, Oct 06 '11 at 21:45
@Dade: I think in this case it would be better to close your question as a duplicate of the other one. — Felix Kling, Oct 07 '11 at 08:33

score 3 · Accepted Answer · answered Oct 08 '11 at 13:41

It is happening probably because you are using an old version of jQuery. Namely the one where the dev team has started using requestAnimationFrame API. Fortunately, they fixed it in 1.6.3. Here is an extract from their blog:

No more animation “worm holes”: We had high hopes for the browser’s requestAnimationFrame API when we added support into version 1.6. However, one of the highest-volume complaints we’ve received since then relates to the way requestAnimationFrame acts when a tab is not visible. All the animations initiated when the tab is invisible “stack” and are not executed until the tab is brought back into focus. Then they all animate at warp speed! We’ve removed support for this API (which has no impact on the way you call jQuery’s animation features) and plan to incorporate it into a future version of jQuery.

Simply update to 1.6.4.

Oh perfect! I realized that I was referencing a old copy on my local file system for testing. Perfect ;) — Freesnöw, Oct 08 '11 at 23:07

Does setTimeout() have issues when that window isn't focused?

1 Answers1