Question

I call ajax jquery function inside .each loop, and I want to do an action just when all the ajax calls inside the loop finish and success.

$(".checked-box").each(function () {
     // ajax call goes here
});
$('.messsage').html('all requests done');

How to do that? without async: false because this blocks the browser.

Answer 1

This is one way:

var numberOfPendingRequests = 8;
$(".checked-box").each(function () {   
   $.ajax({
     success: function(){
        ...
        numberOfPendingRequests --;
        if(numberOfPendingRequests == 0) allDone();
     }
   });
});
function allDone(){
  $('.messsage').html('all requests done');
}

You can calculate the initial numberOfPendingRequests based on your number of checkboxes or start it at 0 an increment it before each ajax request, but this is the general idea.

Hope this helps. Cheers