JavaScript：将超时保存在数组中并全部清除

Question

I have a function that loads content for single elements of a page and a function that reloads content for all elements. To do that, it calls the singleContent function for each element.

Both functions have individual timers that should be reset when all content is reloaded.

// i want to save all setTimeout references here, so that I can easily reset them
var timeouts = [];

// reloads content for single element
function singleContent(selector)
{
    // get and replace content [...]

    // get time for setTimeout from content object [...]
    var time = someFunction();

    // call itself again after specified time and save timeout to timeouts[]
    timeouts.push(setTimeout(function() {singleContent(selector)}, time));
}

// reloads all content by calling singleContent for all elements
function allContent()
{
    // reset timeouts[]
    for (var i = 0; i < timeouts.length; i++) {
        clearTimeout(i);
    }
    timeouts = [];

    //load content
    $("#content").fadeOut(2000, function() {
            $("#content .box").each(function() {
                singleContent(this);
            });
            $("#content").fadeIn(2000);

            // call itself again after specified time
            setTimeout(function() {allContent()}, 30000);
    }); 

}

allContent()

It works so far, but somehow the timeouts array keeps growing bigger. It is emptied, but all the timeouts seem to keep running in the background. How do I clear all the timeouts when allContent() is running?

Answer 1

try to change this line:

clearTimeout(i);

to:

clearTimeout(timeouts[i]);

I think the allContent timeout is at a wrong place too

// reloads all content by calling singleContent for all elements
function allContent()
{
   // reset timeouts[]
   for (var i = 0; i < timeouts.length; i++) {
      clearTimeout(timeouts[i]);
    }
    timeouts = [];

    //load content
    $("#content").fadeOut(2000, function() {
            $("#content .box").each(function() {
                singleContent(this);
            });
            $("#content").fadeIn(2000);

            // call itself again after specified time
    });
    // Need here or the callbacks will be growth exponential (every each start a new timeout)
    setTimeout(function() {allContent()}, 30000);
}