How to avoid nested functions when using AJAX?

Question

Sequential Asynchronous calls are gross. Is there a more readable solution?

The problem is this is hard to follow:

ajaxOne(function() {
  // do something
  ajaxTwo(function() {
    // do something
    ajaxThree()
  });
});

where the anonymous functions are callbacks that are called on server response.

I'm using a third party API to make the AJAX calls, so I need a generic solution.

Answer 1

functional programming to the rescue! jsdeferred lets you write your example like so:

next(ajaxOne).next(ajaxTwo).next(ajaxThree).error(function(e){alert('An error happened:' + e)})

each of the "sequential" ajaxOne/Two/Three functions receives the returned result of its predecessor as parameter. If you need to pass in additional parameters, you can expose them in a global object before you invoke your ajax chain.