Question

I have what I though was a simple problem to solve (never is!) I’m trying to loop through a list of URL’s in a javascript array I have made, load the first one, wait X seconds, then load the second, and continue until I start again.
I got the array and looping working, trouble is, however I try and implement a “wait” using setInterval or similar, I have a structural issue, as the loop continues in the background.

I know about setTimeOut and setInterval, but haven’t been able to format the code in a way that works. I’m new to javascript and as such often make various stupid mistakes, and would really appreciate being able to understand how best to structure this, as well as some working examples!

I tried to code it like this:

$(document).ready(function(){ 

// my array of URL's
var urlArray = new Array();
urlArray[0] = "urlOne";
urlArray[1] = "urlTwo";
urlArray[2] = "urlThree";

// my looping logic that continues to execute (problem starts here)

while (true) {

   for (var i = 0; i < urlArray.length; i++) {

     $('#load').load(urlArray[i], function(){

     // now ideally I want it to wait here for X seconds after loading that URL and then start the loop again, but javascript doesn't seem to work this way, and I'm not sure how to structure it to get the same effect

       });

   }

}

});

Answer 1

I would use a recursive solution that passes the source array and the current index of the element to load, checking to make sure that the index is within the array bounds and that I’m not scheduling unnecessary work.

function loadUrls( source, index )
{
     if (index < source.length) { // make sure this one is available
         $('#load').load( source[index], function() {
             var newIndex = index + 1;
             if (newIndex < source.length) { // don't schedule if this is last
                 setTimeout( function() { loadUrls( source, newIndex ); }, 5000 );
             }
         });
     }
} 

$(document).ready(function(){  

    // my array of URL's 
    var urlArray = new Array(); 
    urlArray[0] = "urlOne"; 
    urlArray[1] = "urlTwo"; 
    urlArray[2] = "urlThree";

    loadUrls( urlArray, 0 );
}

If you want it to infinitely recurse over the same urls, change loadUrls to:

function loadUrls( source, index )
{
     if (index < source.length) { // make sure this one is available
         $('#load').load( source[index], function() {
             var newIndex = (index + 1) % source.length;
             setTimeout( function() { loadUrls( source, newIndex ); }, 5000 );
         });
     }
}