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

       });

   }

}

});

user113716 · Accepted Answer · 2010-06-13 11:20:40Z

2

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;

edited Jun 13, 2010 at 11:20

answered Jun 9, 2010 at 17:14

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Tristan Brotherton Over a year ago

What do you mean manually break out, and how would I structure that? I did try to work with setTimeout() and setInterval() but the problem was it ran the loop all the way through. I do want the loop to repeat indefinitely...

user113716 Over a year ago

@Tristan - I've updated my answer. setInterval() and setTimeout() return a reference that you can use to clear them.

Tristan Brotherton Over a year ago

So with your example do I drop my for loop completely?

user113716 Over a year ago

@Tristan - Sorry, I didn't notice that you wanted to run infinitely. I'll update my answer to reset count to 0.

Tristan Brotherton Over a year ago

@Patrick - I really appreciate your example, i've been stuck with this for hours. Thank you. Marking this as complete...

|

tvanfosson · Accepted Answer · 2010-06-09 17:32:01Z

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

edited Jun 9, 2010 at 17:32

answered Jun 9, 2010 at 17:24

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

2 Comments

Tristan Brotherton Over a year ago

I like the way this is structured, presumably this would also have the added avantage of loading the first URL straight away, which is neat.

tvanfosson Over a year ago

@Tristan - you're right, there would be no delay in loading the first url.

Magnar · Accepted Answer · 2010-06-09 17:27:09Z

0

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

edited Jun 9, 2010 at 17:27

Magnar

28.9k8 gold badges62 silver badges66 bronze badges

answered Jun 9, 2010 at 17:18

womp

117k27 gold badges240 silver badges271 bronze badges

Collectives™ on Stack Overflow

Looping and pausing after loading ajax content in Javascript JQuery

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related