Question

I created a simple rotating banner for a website I created http://sandbox.worldwatchlist.us.

Everything was working fine until I went to another tab in my browser and then came back a few seconds later…the banner was rotating every .5 seconds or less.

I have no clue why this is happening especially since I used setTimeout in the javascript and set it to 10 seconds (10000 ms).

Below is all the code in the banner.js file on the server. Please point out anything that will solve this problem. You can take a look at the website above, or also look at the video screenshot I took at http://www.youtube.com/watch?v=HWb2uc6KpFM. Every browser has this problem that I’ve tested.

I’ve looked all over the place for an answer to “jquery banner rotating too quickly” and no answer to solve my problem other than “use setTimeout”.

var banner_width = 960;
var default_pos = 0;
var current_pos = 0;
var next_pos;
var speed = 500;
var banner_tot; //number of banners
var current_num = 1; //current banner number

    $(function(){

        banner_tot = $(".banner_item").length;
        $(".banner_slider").css({width:(banner_tot*banner_width)});

        setTimeout( "slide()", 10000 );
    });


    function slide(){
        if(current_num==(banner_tot)){
            next_pos= 0;
            $(".banner_slider").animate({left: next_pos}, speed);
            current_num=1;

            setTimeout( "slide()", 10000 );
        }
        else{
            next_pos= current_num*(-banner_width);
            $(".banner_slider").animate({left: next_pos}, speed);
            current_num++;

            setTimeout( "slide()", 10000 );
        }
    }

Answer 1

What you are witnessing is animation buildup. When you switch to a different tab in your browser, the animations get put into a queue, and when you switch back to the original tab, all of them are played sequentially.

Have a look at http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup
for more information.