Make sure all async calls have been completed in jQuery

Question

I have a webapp that is doing a bunch of async API calls using jQuery:s $.get and $.post methods. I need to make sure that all these have finished successfully (HTTP status code 200) before I activate a button (display: none/block).

Is there a way to make sure that there are no outstanding async calls waiting out-of-the-box in jQuery? Or do I need to keep track of this myself?

I'm using jQuery v1.8.3.

You will need to keep track of this yourself. It sounds to me like you expect that really, so I guess you have some idea how to do it. Let us know if not :) — Reinstate Monica Cellio, Apr 18 '13 at 10:03
use ajax calls and - success: error: functions to set a variable for each error... in the last call do a flag (variable) check when done. — Shlomi Hassid, Apr 18 '13 at 10:11

Matt · Accepted Answer · 2014-01-13T22:46:14.447

You can create a "Master Deferred", which will only resolve when all of the other Deferreds (the AJAX requests) have completed successfully;

jQuery.when(jQuery.get('/foo'), jQuery.post('/bar'), jQuery.get('/baz')).done(function () {
    $('button').show();
});

The syntax is to pass each Deferred as a parameter to jQuery.when(), which returns a Deferred which resolves when one fails, or when all of them complete.

If you don't know beforehand how many AJAX requests you have, already have them in an array, or just don't want to use the above, you can use Function.apply like so;

var ajaxRequests = [jQuery.get('/foo'), jQuery.post('/bar'), jQuery.get('/baz')];

jQuery.when.apply(jQuery, ajaxRequests).done(function () {
    $('button').show();
});

For more info, see http://api.jquery.com/jQuery.when, or http://www.mattlunn.me.uk/blog/2014/01/tracking-joining-parallel-ajax-requests-with-jquery/ ^{(my blog)}

score 1 · Answer 2 · edited May 23 '17 at 12:12

1

From this post, you should be able to use the same code (you do not need the abortAll function, though, so it's been removed, and a check for active requests has been added):

$.xhrPool = [];
$.ajaxSetup({
    beforeSend: function(jqXHR) {
        $.xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = $.xhrPool.indexOf(jqXHR);
        if (index > -1) {
            $.xhrPool.splice(index, 1);
        }
        if ($.xhrPool.length > 0) {
            //There are still active requests - keep the button hidden
        } else {
            //There's no more active requests - show the button
        }
    }
});

This will work for all ajax requests requested through jQuery, both with $.get, $.post and $.ajax.

edited May 23 '17 at 12:12

Community

1
1

answered Apr 18 '13 at 10:05

h2ooooooo

39,111
8
68
102

Why store `xhrPool` under the `$` namespace? – Andreas Louv Apr 18 '13 at 11:01
@NULL, I guess because you need to clear the array before checking it – Daniël Tulp Jan 06 '14 at 10:57

Make sure all async calls have been completed in jQuery

2 Answers2