Question

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 comparing 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!!

Answer 1

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