I'm trying to make a slideshow using Jquery, the pictures are cycled by a function that calls itself every 5.5 seconds. However, I'm trying to avoid recursion since it is very expensive paring to iterative calls. And I'm assuming that is the cause for IE to have a non-stopping loading icon when my slideshow is loaded. So I want to convert the following function to an iterative one.

function playslides()
{

//hide previous slide
$(document.getElementById(t)).fadeOut("slow");


//reset slide index
calcSildes();

//show new slide
$(document.getElementById(t)).fadeIn("slow");

//recursive call after 5.5 sec
timer = setTimeout("playslides()", 5500);

}


//on page load...

$(document).ready(

playslides();

);

so far my two approaches are:

1. create a while loop inside the $(document).ready() function and loop playslides() function.

2. create another timer function that calls the playslides() function, and let playslides function call that timer function. (Not sure if this avoids recursion at all...)

Thanks!!

I'm trying to make a slideshow using Jquery, the pictures are cycled by a function that calls itself every 5.5 seconds. However, I'm trying to avoid recursion since it is very expensive paring to iterative calls. And I'm assuming that is the cause for IE to have a non-stopping loading icon when my slideshow is loaded. So I want to convert the following function to an iterative one.

function playslides()
{

//hide previous slide
$(document.getElementById(t)).fadeOut("slow");


//reset slide index
calcSildes();

//show new slide
$(document.getElementById(t)).fadeIn("slow");

//recursive call after 5.5 sec
timer = setTimeout("playslides()", 5500);

}


//on page load...

$(document).ready(

playslides();

);

so far my two approaches are:

1. create a while loop inside the $(document).ready() function and loop playslides() function.

2. create another timer function that calls the playslides() function, and let playslides function call that timer function. (Not sure if this avoids recursion at all...)

Thanks!!

• javascript
• jquery
• recursion
• iteration
• slideshow

Share Improve this question Follow edited Jan 5, 2012 at 20:15 Bo Persson 92.5k3131 gold badges153153 silver badges209209 bronze badges asked Jan 5, 2012 at 18:42 eastboundreastboundr 1,88788 gold badges2929 silver badges4646 bronze badges 3

• 1 Why not use one of the many jquery slide show plugins? – jrummell Commented Jan 5, 2012 at 18:46
• Why do you think it is terribly expensive? Your repeated DOM selection will be the most expensive thing that should be fixed. – user1106925 Commented Jan 5, 2012 at 19:11
• Thanks all, after I changed the function to use SetInterval instead of SetTimeout, the spinning loading icon of IE still persists after page load, any ideas what might caused this? Could it be the "repeated DOM selection"? Thanks! – eastboundr Commented Jan 5, 2012 at 21:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Sounds like you should replace setTimeout() with setInterval(), which will simply repeat the given function until its canceled. No recursion or looping necessary.

Quoting John Resig, creator of jQuery:

At a fundamental level it's important to understand how JavaScript timers work. Often times they behave unintuitively because of the single thread which they are in. Let's start by examining the three functions to which we have access that can construct and manipulate timers.

var id = setTimeout(fn, delay); - Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time.

var id = setInterval(fn, delay); - Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled.

clearInterval(id);, clearTimeout(id); - Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring.

Using setInterval, you could simplify your code to the following:

function playslides()
{
    //hide previous slide
    $(document.getElementById(t)).fadeOut("slow");

    //reset slide index
    calcSildes();

    //show new slide
    $(document.getElementById(t)).fadeIn("slow");
}

$(document).ready(function() {
     setInterval(playslides, 5500);
});

https://developer.mozilla/en/window.setInterval

var intervalID = window.setInterval(playslides, 5500);

You can't create a loop with delayed iterations.

The only optimization is replacing "playslides()" with playslides, and caching the jQuery objects which refer to the same object:

var timer;
function playslides($element) {
    //hide previous slide
    $element.fadeOut("slow");

    //reset slide index
    calcSildes();

    //show new slide
    $element.fadeIn("slow");

    //recursive call after 5.5 sec
    timer = setTimeout(playslides, 5500, $element);
}

// Bug fix too, wrap document.ready in `function(){
$(document).ready(function(){
    playslides($("#"+t));    
});

This is not a recursive function. A recursive function continues to create and retain copies of itself in memory until the base case is reached, after which, the stack unwinds and values are returned. There must also be a change to the parameters in the recursive call which will eventually lead to the base case.

PHP Example:

function recursive_function($num){
    if ($num == 0){ //base case
        return 10;
    }else{
        return $num + recursive_function($num-1);
    }
}

recursive_function(5);//output is 25

Your function is just creating new timers which call the same function after the original has left memory.

Remove the 'timer = setTimeout(playslides, 5500, $element);' line in the playslides function.

Replace the 'playslides($("#"+t));' call in the document.ready function with:

timer = window.setInterval(function(){
    playslides($("#"+t));
}, 5500);

You need to create an anonymous function for setinterval to properly pass parameters (for older browsers...not in HTML5).