jquery : wait until all ajax calls finish then continue [duplicate]

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 ?

Answer 1

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