jquery - How to take an action when all ajax calls in each loop success?

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

Deferreds can make your work simpler.

var deferreds = $('.checked-box').map(function(i, elem) {
  return $.ajax(params);
});

$.when.apply(null, deferreds.get()).then(function() { ... });

Hope this should work.

The concept is

$.when(
    $.ajax( "1" ),
    $.ajax( "2" ),
    $.ajax( "3" )
).then( successFunc, failureFunc );