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.

score 3 · Accepted Answer · edited May 12 '10 at 13:12

3

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.

edited May 12 '10 at 13:12

Will Vousden

32,488
9
84
95

answered May 12 '10 at 13:06

fbuchinger

4,494
2
30
31

Although that approach take significantly more effort to do, it sure is very nice and clean :) But it's not really a matter of "functional programming". – selfawaresoup May 12 '10 at 13:11
This looks really cool, but I cannot figure out how the deferred class works internally. – Fletcher Moore May 12 '10 at 13:44
A look at jsdeferred's source (http://github.com/cho45/jsdeferred/blob/master/jsdeferred.js) tells you that the next-function simply waits for the first ajax call to arrive (using setTimeout) and then sends the next. – fbuchinger May 17 '10 at 08:46
I think the general concept is known as [promises](http://www.html5rocks.com/en/tutorials/es6/promises/). A part from jsdeferred you could use the [Q](https://github.com/kriskowal/q) library to prevent the [pyramid of doom](http://calculist.org/blog/2011/12/14/why-coroutines-wont-work-on-the-web/) mentioned above. – rene Jul 11 '14 at 12:49

rene · Answer 2 · 2014-07-11T12:51:48.703

First I have to admit, I'm relatively new to JavaScript, but I recently encountered the same problem while using the jQuery ajax function. I had to upload a couple of documents via POST to a server in a certain order. Nesting all the call backs would have produced completely messed up code. I thought about a solution after reading the answers and came up with a solution that worked fine me. It uses only one function with a switch clause to differentiate the different callback invocations:

var callback = function(sCallIdentifier, callbackParameters){
  switch(sCallIdentifier){
     case "ajaxOne":
        doYourStuff(callbackParameters); //do your stuff for ajaxOne
        ajaxTwo(function(newCallbackParameters){
           /*define a anonymous function as actual method-callback and pass the call-identifier, together with all parameters, to your defined callback function*/
           callback("ajaxTwo", newCallbackParameters);
        });
       break;
     case "ajaxTwo":
       doYourStuff(callbackParameters);
       ajaxThree(function(newCallbackParameters){
          callback("ajaxThree", newCallbackParameters);
       });
       break;
     case "ajaxThree":
       doYourStuff();
       break;
 }
});

If this is not a good idea, please let me know. As I said, I'm not a JavaScript expert but I it worked pretty well for me.

Best, René

Edit:

After a while I found out that Promises are a much better approach to solve this problem.

score 1 · Answer 3 · answered May 12 '10 at 12:56

If you have only one nested function, it's Ok to leave it as is, but if you have several nested calls, you should consider writing these callbacks in a separate method, and calling it from the nested function...

ajaxOne(function(result) { handleAjaxOneCallback(result, someExtraNeededArg); } );

function handleAjaxOneCallback(result, someExtraNeededParam) {
  // do something

  ajaxTwo(function(result) { handleAjaxTwoCallback(result, myFoo, myBar); });
}

function handleAjaxTwoCallback(result, foo, bar) {
  // do something

  ajaxThree(/* ... */);
}

score 0 · Answer 4 · answered May 12 '10 at 13:04

0

If you don't need the closure scope in your callbacks, which you probably won't, you can just put the callbacks into separate functions and call them by their name. like:

var ajaxOne = function() {
    doTheAjax(callbackOne);
}
var callbackOne = function() {
    //funny things ...
    doTheAjax(callbackTwo);
}
var callbackTwo = function() {
    //even more funny things ...
}

answered May 12 '10 at 13:04

selfawaresoup

15,473
7
36
47

My question was probably poorly formed. This is actually the method I use as the line would get way too big in my example. However the logic is hard to follow because the calls must still be traced. – Fletcher Moore May 12 '10 at 13:19

How to avoid nested functions when using AJAX?

4 Answers4