I'm looking for a Thread.Join() type thing. Lets say I trigger 4 events in javascript. I want to execute code but only after all 4 callbacks have been pleted. How do I do that? The only way I can think of is checking if any the 4 callbacks are in process via global var in which case i ignore or throw exception. But otherwise do something like globalVar++ in each callback and call IsItDone() at the end of each callback which checks if the globalVar is == 4.

But.. I kind of dont like it especially since I need to use a global var.

I'm looking for a Thread.Join() type thing. Lets say I trigger 4 events in javascript. I want to execute code but only after all 4 callbacks have been pleted. How do I do that? The only way I can think of is checking if any the 4 callbacks are in process via global var in which case i ignore or throw exception. But otherwise do something like globalVar++ in each callback and call IsItDone() at the end of each callback which checks if the globalVar is == 4.

But.. I kind of dont like it especially since I need to use a global var.

• javascript
• callback

• Take a look at pubsub.js it's really helpful for stringing events together. Subscribe and publish just syncronously goes through each of the subscribed events in order (if you flag it as syncronous). github./mroderick/PubSubJS – Gats Commented Jan 13, 2013 at 0:45
• Added that as a ment as it's not a direct answer. – Gats Commented Jan 13, 2013 at 0:46

2 Answers 2

You can string up a queue and wrap callbacks yourself buts it sort of hairy. Luckily there are a ton of libraries out there to help. I'm not a fan of the counter approach because sometimes it's hard to know which callbacks haven't fired yet.

I'm a fan of the "Deferred" style. Such as this library: https://github./heavylifters/deferred-js

Or for a totally different API, see Step.js https://github./creationix/step

Or see here for other micro libs that encapsulate this issue: http://microjs./#defer

Or just do it yourself by calling setting some external state, and then calling a shared done function in every callback.

var plete = {
  first: false,
  second: false
};

doFirstAsync(function() {
  plete.first = true;
  allDone();
});

doSecondAsync(function() {
  plete.second = true;
  allDone();
});

var allDone = function() {
  if (plete.first && plete.second) {
    alert("done with all async!");
  }
};

Most of the libraries above do this for you based on a similar approach. But just abstracted and generalized. That generalization is where things can get hairy, as you have arrays of callbacks functions flying everywhere. It's fun functional programming, but it can get conceptually plex.

If you are doing this all over, use a lib that has an API you like.

If you don't mind adding jQuery to your site you can use its "deferred object" capability.

Each async function (include jQuery's built-in AJAX functions) can return a "promise" to return something later.

To achieve what you're asking for you can then call:

$.when(p1, p2, p3, p4).done(function() {
    // this will be called only when
    // all of p1 - p4 have been "resolved"
});

If you prefer to have an array p containing those promises instead, call $.when like this instead:

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