Event after all ajax calls are complete

Question

I have a click event that fires off 3 ajax calls:

$("#button").click(function(e) {
    e.preventDefault();

    $.ajax(call1);
    $.ajax(call2);
    $.ajax(call3);

    some_function() //should fire off AFTER all ajax calls are complete
});

Is there a way for me to confirm all ajax calls have been fired BEFORE firing off my some_function() function?

Thanks in advance!

Answer 1

You can use $.when

Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

$.when($.ajax(call1), $.ajax(call2), $.ajax(call3))
.done(function () {
     some_function();
});

---

If (for some reason) you have an array of promises, then you may call this method using Function.prototype.apply():

$.when.apply($, ajaxArray)
.done(function () {
   some_function();
});

Answer 2

I suggest you to use async: false and put the $.ajax inside another ajax, somelike this...

$.ajax({
    async: false,
    // ...
    complete: function() {
        $.ajax({ // second ajax
            async: false,
            // ...
            complete: function() {
                $.ajax({ // second ajax
                    async: false,
                    // ...
                    complete: function() {
                         some_function();
                    }
                });
            }
        });
    }
});