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.

Answer 1

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.