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 plete
});

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

Thanks in advance!

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 plete
});

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

Thanks in advance!

• javascript
• jquery
• ajax
• events

• Do you care if they succeed? – Neil Twist Commented Mar 10, 2016 at 1:36
• No, i don't care if they succeed @NeilTwist – Trung Tran Commented Mar 10, 2016 at 1:38
• The only way to confirm that they have been fired is to handle the response. You can ignore the data itself as in my answer. Set an appropriate timeout if response time is an issue. – Neil Twist Commented Mar 10, 2016 at 1:44

3 Answers 3

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();
});

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

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

It depends if you require success responses, but consider the following:

$.ajax({
    url: "http://some.url.example./endpoint",
})
.always(function (data){
    // Process the data
    $.ajax({
        url: "http://some.url.example./endpoint2",
    })
    .always(function (data2){
        // Process the data
        $.ajax({
            url: "http://some.url.example./endpoint3",
        })
        .always(function (data) {
            someFunction();
        });
    });
});

There is a lot more reading that could be done about jQuery deferred objects and ES6 Promises.

If you wish to set a timeout and don't care about the result, set the timeout option `$.ajax({url: "http://some.url.example./endpoint", timeout: 500})

OR

Set a variable in each and use window.setTimeout to check when they've all been set, but that is horrible.