How can I wait for set of asynchronous callback functions?

Go To StackoverFlow.com

87

I have code that looks something like this in javascript:

forloop {
    //async call, returns an array to its callback
}

After ALL of those async calls are done, I want to calculate the min over all of the arrays.

How can I wait for all of them?

My only idea right now is to have an array of booleans called done, and set done[i] to true in the ith callback function, then say while(not all are done) {}

edit: I suppose one possible, but ugly solution, would be to edit the done array in each callback, then call a method if all other done are set from each callback, thus the last callback to complete will call the continuing method.

Thanks in advance.

2012-04-04 02:14
by codersarepeople
On async do you mean waiting for an Ajax request to complete - Peter Aron Zentai 2012-04-04 02:16
Note, while (not all are done) { } wouldn't work. While you're busy-waiting, none of your callbacks can run - cHao 2012-04-04 02:18
Yes. I'm waiting an async call to an external API to return so that it will fire the callback methods. Yeah cHao, I realized that, which is why I'm asking for help here : - codersarepeople 2012-04-04 02:19
You could try this: https://github.com/caolan/async Very nice set of async utility functions - Paul Greyson 2012-04-04 02:22


174

You haven't been very specific with your code, so I'll make up a scenario. Let's say you have 10 ajax calls and you want to accumulate the results from those 10 ajax calls and then when they have all completed you want to do something. You can do it like this by accumulating the data in an array and keeping track of when the last one has finished:

Manual Counter

var ajaxCallsRemaining = 10;
var returnedData = [];

for (var i = 0; i < 10; i++) {
    doAjax(whatever, function(response) {
        // success handler from the ajax call

        // save response
        returnedData.push(response);

        // see if we're done with the last ajax call
        --ajaxCallsRemaining;
        if (ajaxCallsRemaining <= 0) {
            // all data is here now
            // look through the returnedData and do whatever processing 
            // you want on it right here
        }
    });
}

Note: error handling is important here (not shown because it's specific to how you're making your ajax calls). You will want to think about how you're going to handle the case when one ajax call never completes, either with an error or gets stuck for a long time or times out after a long time.


jQuery Promises

Adding to my answer in 2014. These days, promises are often used to solve this type of problem since jQuery's $.ajax() already returns a promise and $.when() will let you know when a group of promises are all resolved and will collect the return results for you:

var promises = [];
for (var i = 0; i < 10; i++) {
    promises.push($.ajax(...));
}
$.when.apply($, promises).then(function() {
    // returned data is in arguments[0][0], arguments[1][0], ... arguments[9][0]
    // you can process it here
}, function() {
    // error occurred
});

ES6 Standard Promises

As specified in kba's answer: if you have an environment with native promises built-in (modern browser or node.js or using babeljs transpile or using a promise polyfill), then you can use ES6-specified promises. See this table for browser support. Promises are supported in pretty much all current browsers, except IE.

If doAjax() returns a promise, then you can do this:

var promises = [];
for (var i = 0; i < 10; i++) {
    promises.push(doAjax(...));
}
Promise.all(promises).then(function() {
    // returned data is in arguments[0], arguments[1], ... arguments[n]
    // you can process it here
}, function(err) {
    // error occurred
});

If you need to make a non-promise async operation into one that returns a promise, you can "promisify" it like this:

function doAjax(...) {
    return new Promise(function(resolve, reject) {
        someAsyncOperation(..., function(err, result) {
            if (err) return reject(err);
            resolve(result);
        });
    });
}

And, then use the pattern above:

var promises = [];
for (var i = 0; i < 10; i++) {
    promises.push(doAjax(...));
}
Promise.all(promises).then(function() {
    // returned data is in arguments[0], arguments[1], ... arguments[n]
    // you can process it here
}, function(err) {
    // error occurred
});

Bluebird Promises

If you use a more feature rich library such as the Bluebird promise library, then it has some additional functions built in to make this easier:

 var doAjax = Promise.promisify(someAsync);
 var someData = [...]
 Promise.map(someData, doAjax).then(function(results) {
     // all ajax results here
 }, function(err) {
     // some error here
 });
2012-04-04 02:19
by jfriend00
The jQuery solution works pretty well for me - larrydahooster 2015-09-23 12:31
@kba - I wouldn't have exactly called this answer outdated since all the techniques are still applicable, particularly if you're already using jQuery for Ajax. But, I've updated it in several ways to include native promises - jfriend00 2015-11-19 22:04
theese days there is a much cleaner solution which doesnt even need jquery. I'm doing it with FetchAPI and Promise - philx_x 2016-04-14 19:20
@philx_x - What are you doing about IE and Safari support - jfriend00 2016-04-14 20:37
@jfriend00 github made a polyfill https://github.com/github/fetch. Or i'm not sure if babel supports fetch yet. https://babeljs.io - philx_x 2016-04-14 20:43
@philx_x - Thought so. You need a polyfill library in order to use fetch nowadays. Takes a little air out of your comment about avoiding an ajax library. Fetch is nice, but it's years away from being able to use it without a polyfill. It's not even in the latest version of all browsers yet. Do, it doesn't really change anything in my answer. I had a doAjax() that returns a promise as one of the options. Same thing as fetch() - jfriend00 2016-04-14 20:47
@jfriend00 yeah .. my answer was probably a little hasty, if you don't develop for production though Promise together with fetch() is soooo nice : - philx_x 2016-04-14 20:59


14

Checking in from 2015: We now have native promises in most recent browser (Edge 12, Firefox 40, Chrome 43, Safari 8, Opera 32 and Android browser 4.4.4 and iOS Safari 8.4, but not Internet Explorer, Opera Mini and older versions of Android).

If we want to perform 10 async actions and get notified when they've all finished, we can use the native Promise.all, without any external libraries:

function asyncAction(i) {
    return new Promise(function(resolve, reject) {
        var result = calculateResult();
        if (result.hasError()) {
            return reject(result.error);
        }
        return resolve(result);
    });
}

var promises = [];
for (var i=0; i < 10; i++) {
    promises.push(asyncAction(i));
}

Promise.all(promises).then(function AcceptHandler(results) {
    handleResults(results),
}, function ErrorHandler(error) {
    handleError(error);
});
2015-11-19 20:29
by kba
Promises.all() should be Promise.all() - jfriend00 2015-11-19 22:03
Your answer also needs to refer to which browsers you can use Promise.all() in which includes no current versions of IE - jfriend00 2015-11-19 23:04


10

You can use jQuery's Deferred object along with the when method.

deferredArray = [];
forloop {
    deferred = new $.Deferred();
    ajaxCall(function() {
      deferred.resolve();
    }
    deferredArray.push(deferred);
}

$.when(deferredArray, function() {
  //this code is called after all the ajax calls are done
});
2012-04-04 02:19
by Paul
The question wasn't tagged for jQuery which usually means the OP did not want a jQuery answer - jfriend00 2012-04-04 02:21
@jfriend00 I didn't want to reinvent the wheel when it was already created in jQuer - Paul 2012-04-04 02:23
@Paul so rather then re-invent the wheel your including 40kb of junk to do something simple (deferreds - Raynos 2012-04-04 02:26
But not everybody can or wants to use jQuery and the custom here on SO is that you indicate that by whether you tag your question with jQuery or not - jfriend00 2012-04-04 02:26
@jfriend00 thanks for letting me know about that. I'll be sure to check the tags in the future - Paul 2012-04-04 02:32
Also, deferreds/futures are not a unique feature of jquer - hugomg 2012-04-04 03:15
The $.when call is this example is incorrect. To wait for an array of deferred/promises you need to use $.when.apply($, promises).then(function() { /* do stuff */ }) - danw 2013-04-19 22:12


8

You can emulate it like this:

  countDownLatch = {
     count: 0,
     check: function() {
         this.count--;
         if (this.count == 0) this.calculate();
     },
     calculate: function() {...}
  };

then each async call does this:

countDownLatch.count++;

while in each asynch call back at the end of the method you add this line:

countDownLatch.check();

In other words, you emulate a count-down-latch functionality.

2012-04-04 02:21
by Eugene Retunsky
In 99% of all the use cases a Promise is the way to go but I like this answer because it illustrates a method to manage Async code in situations where a Promise polyfill is larger then the JS that uses it - Sukima 2016-09-05 13:46


3

This is the most neat way in my opinion.

Promise.all

FetchAPI

(for some reason Array.map doesn't work inside .then functions for me. But you can use a .forEach and [].concat() or something similar)

Promise.all([
  fetch('/user/4'),
  fetch('/user/5'),
  fetch('/user/6'),
  fetch('/user/7'),
  fetch('/user/8')
]).then(responses => {
  return responses.map(response => {response.json()})
}).then((values) => {
  console.log(values);
})
2016-04-14 19:30
by philx_x
I think this needs to be return responses.map(response => { return response.json(); }), or return responses.map(response => response.json()) - NoName 2016-06-27 04:41


1

Use an control flow library like after

after.map(array, function (value, done) {
    // do something async
    setTimeout(function () {
        // do something with the value
        done(null, value * 2)
    }, 10)
}, function (err, mappedArray) {
    // all done, continue here
    console.log(mappedArray)
})
2012-04-04 02:28
by Raynos