jQuery continue loop execution after ajax success

Question

I have a jQuery ajax call in a loop. However I do not want those ajax calls to be made simultaneously, I need the first ajax call to finish before going on to the next.

for (var i = 0; i < options.length; i++) {  
        jQuery.ajax({
            url: "ajax_file.php",
            data: //some data based on DOM tree
            success: function(data){
                //some DOM manipulation
            }
        });
}

I want the loop to continue executing only after the DOM manipulation in SUCCESS was executed (because the ajax call depends on the DOM tree). In theory I know I could set the ajax call to be async:false, but it is not recommended as it can freeze the browser.

binarious · Accepted Answer · 2011-09-07 08:17:11Z

8

Because async: false is always a bad idea, I'd recommend something like this:

var recur_loop = function(i) {
    var num = i || 0; // uses i if it's set, otherwise uses 0

    if(num < options.length) {
        jQuery.ajax({
            url: "ajax_file.php",
            data: //some data based on DOM tree
            success: function(data){
                recur_loop(num+1);
            }
        });
    }
};

answered Sep 7, 2011 at 8:17

binarious

4,58828 silver badges35 bronze badges

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

2 Comments

Nathan H Over a year ago

that looks like some weird recursion ... but seems to works like a charm so far!

Lin Over a year ago

Great solution which I was looking for! Thanks for saving my life.

Paul · Accepted Answer · 2011-09-07 08:17:05Z

1

Setting async to false will do that. Keep in mind that the web browser might lock up while the requests happen if you do them asynchronously.

jQuery.ajax({
    async : false,
    url: "ajax_file.php",
    data: //some data based on DOM tree
    success: function(data){
        //some DOM manipulation
    }
});

answered Sep 7, 2011 at 8:17

Paul

142k28 gold badges285 silver badges272 bronze badges

Comments

J. Ed · Accepted Answer · 2011-09-07 08:22:25Z

1

you can do something like this (pseudo-code):

var i =0;
doLoop();

function doLoop() {
   //exit condition
   if (i >= options.length) {
      return;
   }
   //loop body- call ajax
   $.ajax({
   //...
   success: function(data) {
      //do your thing
      i++;
      //go to next iteration of the loop
      doLoop();
   }
   });
}

edited Sep 7, 2011 at 8:22

answered Sep 7, 2011 at 8:15

J. Ed

6,7625 gold badges41 silver badges57 bronze badges

Collectives™ on Stack Overflow

jQuery continue loop execution after ajax success

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related