如何使用Jquery / javascript将递归函数转换为循环函数

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

Answer 2

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

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

Answer 3

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

Answer 4

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).