A Bad Solution
The issue here is knowing when it is safe to execute the task that renders the Github information to the page. One strategy might be to store the results from each api call in an array and then wait for a set amount of time before drawing the page.
results =  githubApiCallOne (response) -> results.push(response) githubApiCallTwo (response) -> results.push(response) setTimeout(() -> drawPage(results) , 5000)
This turns out to be a poor solution as we can either end up waiting too little, in which case the program would fail or we could set the timeout too high making our users wait longer than necessary to load our page.
Promises to The Rescue
Fortunately there is a better way to implement our Github page. Using a construct called a Promise (sometimes called a Future) allows us to elegantly handle these types of situations. Using promises we can turn our code into something like this:
Promise.when( githubApiCallOne(), githubApiCallTwo() ).then((apiCallOneData, apiCallTwoData) -> renderPage(apiCallOneData, apiCallTwoData) )
The basic idea is that our async api calls will now return a promise object that functions much like an IOU – they can’t give us the results of the api call immediately but they (probably) can at some time in the future. The Promise.when method takes an arbitrary number of promise objects as parameters and then executes the callback in the “then” method once every promise passed to “when” has been completed.
To do this, our api calls would have to be modified to return promise objects, which turns out to be trivial. Such an implementation might look like so:
githubApiCallOne = () -> promise = new Promise() # async call ajaxGet("/repositories", (repository_data) -> # fulfill the promise when async call completes promise.complete(repository_data) ) return promise githubApiCallTwo = () -> promise = new Promise() ajaxGet("/users", (user_data) -> promise.complete(user_data) ) return promise
The githubApiCallOne and githubApiCallTwo make their ajax calls but return a promise object immediately. Then when the AJAX calls complete, they can fulfill the promise objects by calling “complete” and passing in their data. Once both promise objects have been fulfilled the callback passed to Promise.then is executed and we render the page. With jQuery
The good news is if you’re already using jQuery you get Promises for free. As of jQuery 1.5 all the $.ajax methods (eg. $.get, $.post etc) return promises which allows you to do this:
promise1 = $.get "http://foo.com" promise2 = $.post "http://boo.com" $.when(promise1, promise2) .then (promise1Result, promise2Result) -> # do something with the data
What if I cant use jQuery?
class Promise @when: (tasks...) -> num_uncompleted = tasks.length args = new Array(num_uncompleted) promise = new Promise() for task, task_id in tasks ((task_id) -> task.then(() -> args[task_id] = Array.prototype.slice.call(arguments) num_uncompleted-- promise.complete.apply(promise, args) if num_uncompleted == 0 ) )(task_id) return promise constructor: () -> @completed = false @callbacks =  complete: () -> @completed = true @data = arguments for callback in @callbacks callback.apply callback, arguments then: (callback) -> if @completed == true callback.apply callback, @data return @callbacks.push callback
And Finally an example using the supplied Promise class to prove it works:
delay = (string) -> promise = new Promise() setTimeout(() -> promise.complete string ,200) return promise logEverything = (fooData, barData, bazData) -> console.log fooData, barData, bazData window.onload = () -> Promise.when( delay("foo"), delay("bar"), delay("baz") ).then logEverything