A Pattern for Nested Asynchronous Calls

I recently wrote an HTML5 application that loaded a large data set into the browser using nested calls to a web service. The first call loaded up information to make a set of subsequent calls, each of which in turn loaded up information to make a third set of calls.

You could point out that seems to be a lot of interdependent calls to get data. In my defense it was a third party service and I did not want to write my own server to handle data aggregation. Yes. I was being lazy. So I continued to load data in a piecemeal fashion and used the following callback pattern to provide incremental feedback on the loading process.

function loadData(stepCallback, endCallback) {
...
}

The loadData function above calls stepCallback() whenever one of the nested calls returns and endCallback() when all of the nested calls return. I used this pattern of callbacks to create a polite loading window that notifies users about what is being loaded in real time.

I may be lazy, but I do have manners.