jquery : wait until all ajax calls finish then continue

Question

I have some ajax calls in my document.ready()

like :

for (j=1; j <= 7; j++){
  (function(index) {
    $.getJSON('my.php', {id:index}, 
      function(data) {
         $.each(data, function(index2, array){
         ........
         });  
      });
    })(j)
} 

//DO NOT CONTINUE UNTIL FINISH AJAX CALLS   

 ........
MORE JQUERY CODE

How can i force it to wait and not continue until we get all the call backs from the ajax requests ?

See my other answer here: http://stackoverflow.com/a/11315571/49885, ajaxStop is what you want, its been built in since jquery 1.0 — Allen Rice, Jul 03 '12 at 16:56

sandino · Accepted Answer · 2012-06-27T18:58:48.083

16

I do not like any answer at all, the best way (since Jquery 1.5+) is to use Deferred objects, those are objects to manipulate async calls, you can solve :

$.when($.ajax("/page1.php"), $.ajax("/page2.php"))
  .then(myFunc, myFailure);

This way myFunc executes after the 2 ajax calls are made, and myFailure if either one has an error.

You can read more about it in the jquery official documentation:JQuery Deferred Object

I write this solution if anyone sees this post it may be helpful.

Sorry my english :P

edited Jun 27 '12 at 18:58

answered Jun 27 '12 at 02:37

sandino

3,813
1
19
24

1

Whatever you call them - deferred objects, promises, etc. - those seem like a much better solution than parallel loops to me – Nate Bundy Sep 17 '13 at 19:36

score 6 · Answer 2 · answered Oct 17 '10 at 07:39

First off, you might want to consider doing the startup code in a single call.
Second: Instead of waiting just call another function call. for the above code it should look something like:

for (j=1; j <= 7; j++){
  (function(index) {
    $.getJSON('my.php', {id:index}, 
      function(data) {
         $.each(data, function(index2, array){
         ........
         }); 

         if (j === 7) {
            initDoneDoMoreStuff()
         }
      });
    })(j)
}

or trigger:

for (j=1; j <= 7; j++){
  (function(index) {
    $.getJSON('my.php', {id:index}, 
      function(data) {
         $.each(data, function(index2, array){
         ........
         }); 

         if (j === 7) {
            $(document).trigger("initdone");
         }
      });
    })(j)
}

$(document).bind("initdone", function() {....});

Thanks, this worked beautifully for me. (the triggering initdone) — tsdexter, Nov 26 '11 at 19:21
I tried async: false and still had issues. The solution to call the submitting function within ajax was perfect. Thanks! — Eddie Wesley, May 18 '12 at 14:12

score 3 · Answer 3 · answered Jun 06 '11 at 08:30

It wasn´t easy for me to do it, but maybe you find my code useful. It´s a process to submit all forms in the dom and after all of them are stored, redirect the user to another page.

formulario = $('form');
formulariolongitud = formulario.length;
i = 0;

formulario.each(function(index, value) {
    $(this).ajaxSubmit({
        async: false,//not sure i
        success: function() {
            i++; 

            if(i === formulario.length) {//this is the last one to submit
                window.location.replace(whatever);
            }
        } 
    });                         
});

Alpesh · Answer 4 · 2010-10-17T07:40:06.797

1

you can use sucess (ie a callback function of ajax jquery) like below :

$.ajax({
  url: url,
 dataType: 'json',
 data: data,
 success: function(data){
 //Write your code here.
    }
});

You can get documentation of ajax below -

ajax

edited Oct 17 '10 at 07:40

answered Oct 17 '10 at 07:31

Alpesh

5,307
2
19
19

how can i use it in my code ? – Haim Evgi Oct 17 '10 at 07:32
1

@Haim Evgi: Move the code you have after the call and you want to execute after the call finished inside the callback. – Felix Kling Oct 17 '10 at 07:33
I have edited my code as per your requirement. You can use ajax instead of getjson as described above. – Alpesh Oct 17 '10 at 07:34
thank you very much , but i use @shay solution – Haim Evgi Oct 17 '10 at 07:45
I used a variant of this for some post backs to a cgi handler. JQuery provides another function, $.post, which also allows you to call a function on success. – slm Jul 06 '12 at 16:40

score 0 · Answer 5 · edited May 23 '17 at 10:28

0

The problem with something like if (j == 7) is the situation when the 7th request is very very fast, and even one of the others is slow. Even though you have queued it up last, it might not be the last to complete.

This answer seems to work for all conditions: https://stackoverflow.com/a/3709809/813154

edited May 23 '17 at 10:28

Community

1
1

answered Jan 20 '12 at 00:54

Leo Romanovsky

1,790
1
15
15

jquery : wait until all ajax calls finish then continue

5 Answers5

Linked

Related