"too much recursion" jquery error

Question

Trying to create a background-image slideshow and am getting this error... This is the code I'm trying to implement:

var $j = jQuery.noConflict();
$j( function(){
    var bgArr = [ 'sample1.jpg','sample2.jpg','sample3.jpg' ];
    function backgroundSlide(i) {
             $j("#home_sub_banner").css("background-image", "url("+bgArr[i++]+")");
             if (i == bgArr.length) i = 0;
             var st = setTimeout(arguments.callee(i), 1000);
    }
backgroundSlide(0)

});

Answer 1

This is creating an infinite recrusive method call to backgroundSlide.

Why don't you try a different implementation using setInterval instead?

Something like this:

var bgArr = [ 'sample1.jpg','sample2.jpg','sample3.jpg' ];
var currentBg = 0;
function backgroundSlide() {
         $j("#home_sub_banner").css("background-image", "url("+bgArr[currentBg++]+")");
         if (currentBg == bgArr.length) currentBg = 0;
}
setInterval(backgroundSlide, 1000);

PS: Above Code not tested but you'll get the gist of it.

Answer 2

When you write arguments.callee(i), you are calling arguments.callee and passing its result (if any) to setTimeout. This results in infinite recursion.

You need pass setTimeout and anonymous function that calls arguments.callee later, like this:

var me = arguments.callee;
setTimeout(function() { me(i); }, 1000);