Looping and pausing after loading ajax content in Javascript JQuery

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

You should use setTimeout() or setInterval() instead of a while loop, and manually break out when your counter limit is reached.

var count = 0;

   // Function called by setInterval
function loadIt() {
    $('#load').load(urlArray[count], function(){
           // Do your thing
      }); 

      count++;  // Increment count

      if(count == urlArray.length) {  
          count = 0;
      }
}

loadIt();    // Call the function right away to get it going

var interval = setInterval(loadIt, 5000);  // then call it every five seconds

EDIT:

Edited to bring counter maintenance out of the load() callback.

EDIT:

A prettier way of setting the count each time would be like this:

count = (count == urlArray.length) ? 0 : count + 1;

Answer 2

Try something like this.

var totalUrls = urlArray.length;
var currentPosition = 0;

function keepLoadingForever() {
  if (currentPosition >= totalUrls) currentPosition = 0;

   $('#load').load(urlArray[currentPosition], function(){
       setTimeout(keepLoadingForever, 5000);            //delay 5 seconds
       });
   }

  currentPosition++;
}

Answer 3

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