Question

I want to get two resources using two asynch calls. I want to proceed only when both resources have been retrieved.

How can I do this elegantly in JS?

This would work:

getStuff1(function (result1) {
    getStuff2 (function (result2) {
        // do stuff with result1 and result2
        ....
    }
}

but stuff2 only starts after stuff1 completes. I’d prefer to start stuff2 while waiting on stuff1.

Answer 1

If you know that functions are in fact first-class objects in Javascript, you can come up with a fairly elegant solution.

Without any extra objects, or global variables.

function callback1() {
  callback1.done = true;
  commonCallback();
}

function callback2() {
  callback2.done = true;
  commonCallback();
}

function commonCallback() {
  if (callback1.done && callback2.done) {
    // do stuff, since you know both calls have come back.
  }
}

Why is this so elegant? Because you’ve encapsulated the data, your scope is free from useless variables and the code is more readable than ever. How cool is that? 🙂

---

UPDATE

And if you want a bit more general solution you may try the following:

function callback() {
  callback.number -= 1;
  if (callback.number === 0) {
    // do stuff since all calls finished
    callback.last();
  }
}
callback.newQueue = function(num, last) {
  callback.number = num;
  callback.last   = last;
}

// EXAMPLE USAGE

// our last function to be invoked
function afterEverythingDone(){ alert("done"); }

// create a new callback queue
callback.newQueue(3, afterEverythingDone);

// as time passes you call the callback
// function after every request
callback();
callback();
callback();

// after all call is finished
// afterEverythingDone() executes

Awesomeness again 🙂