jQuery banner rotating too fast even though setTimeout is set for 10 seconds
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 );
    	}
    }

jQuery banner rotating too fast even though setTimeout is set for 10 seconds
===

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