How To Avoid Callback Chains?

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 cal

Solution 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 stuffnext();
}

Solution 2:

You can implement a "stack" system:

var calls = [];

functionexecuteNext(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);
});

Solution 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.

Solution 4:

You might want to pass parameters to the functions, I do not believe you can at the time of this writing. However...

functioncallMe1(next) {
    console.log(this.x);
    console.log("arguments=");
    console.log(arguments);
    console.log("/funct 1");
    this.x++;
    next();
}
functioncallMe2(next) {
    console.log(this.x);
    console.log("arguments=");
    console.log(arguments);
    console.log("/funct 2");
    this.x++;
    next();
}
functioncallMe3(next) {
    console.log(this.x);
    console.log("arguments=");
    console.log(arguments);
    console.log("/funct 3");
    this.x++;
    next();
}
var someObject = ({x:1});
$(someObject).queue(callMe1).queue(callMe2).queue(callMe3);

Solution 5:

Wrapping your functions, arguments intact, with an anonymous function that plays along with .queue works too.

Passing Arguments in Jquery.Queue()

var logger = function(str, callback){
    console.log(str);
    //anything can go in here, but here's a timer to demonstrate asyncwindow.setTimeout(callback,1000)
}

$(document)
.queue(function(next){logger("Hi",next);})
.queue(function(next){logger("there,",next);})
.queue(function(next){logger("home",next);})
.queue(function(next){logger("planet!",next);});

Example on JSFiddle: http://jsfiddle.net/rS4y4/