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

Share Improve this question Follow edited Mar 10, 2016 at 1:31 BrTkCa 4,79344 gold badges2828 silver badges4545 bronze badges asked Mar 10, 2016 at 1:19 Trung TranTrung Tran 13.8k4848 gold badges126126 silver badges209209 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.