Question

I have the following pattern which strings together function1, 2 and 3 through their callbacks.

Assume that function1, 2 and 3 can take up to 1 second to complete. I would like to know other “better” ways of doing the same so that it doesn’t turn into a monster when more callback functions are nested.

function1(function(cbData1){
  if(cbData1){
    function2(cbData1, function(cbData2){
      if(cbData2){
        function3(cbData2, function(cbData3){
          // success
        }
      } else {
        // failed for reason#2
      }
    });
  } else {
    //failed for reason#1
  }
});


//example function
function function2(data, callback) {
  // do dirty things
  callback(newData);
}

Answer 1

The last time I played with really nasty callbacks, I ended up doing something like this:

// Typed on the fly, be kind
var callbackList = [];  // A list of functions to call in order.

function doNextCallback() {
  if (callbackList.length) {
    var f = callbackList.shift(); // Get the next callback function
    window.setTimeout(f);         // Give breathing space.
  }
}

// Set up our callbacks
callbackList.push(f1);
callbackList.push(f2);
callbackList.push(f3);

// Start it happening.
doNextCallback();          


function f1() {
  console.log("Busy busy");
  doNextCallback();
}

function f2() {
  console.log("Busy busy");
  doNextCallback();
}
function f3() {
  console.log("Busy busy");
  doNextCallback();
}

I had it all wrapped up in a nice object, but you get the idea.

This also made it very easy to re-arrange callbacks or to call just two of them in a big loop for testing purposes.