how to avoid callback chains?

Question

I need a bunch of functions to be called in strict order. It's also very important that the next function waits until the previous one has finished.

Right now I'm using chained callbacks:

callMe1(function(){
    callMe2(function(){
        callMe3(function(){

            callMeFinal();

        });
    });
});

This works but seems to be a little ugly.

Any suggestions for a different approach?

Answer 1

If you use jQuery, then you can use queue to chain the functions.

$(document)
  .queue(callMe1)
  .queue(callMe2);

where callMeX should be of form:

function callMeX(next) {
    // do stuff
    next();
}

Answer 2

You can implement a "stack" system:

var calls = [];

function executeNext(next) {
    if(calls.length == 0) return;
    var fnc = calls.pop();
    fnc();
    if(next) {
        executeNext(true);
    }
}

/*To call method chain synchronously*/
calls.push(callMe3);
calls.push(callMe2);
calls.push(callMe1);
executeNext(true);

/*To call method chain asynchronously*/
calls.push(callMe3);
calls.push(function(){
    callMe2();
    executeNext(false);
});
calls.push(function(){
    callMe1();
    executeNext(false);
});

Answer 3

Not sure if this would help you, but there is a great article on using deferreds in jQuery 1.5. It might clean up your chain a bit...

Also, my answer on Can somebody explain jQuery queue to me has some examples of using a queue for ensuring sequential calls.