JavaScript：如何构造两个以上的回调

Question

I've tried searching for this and cannot find the answer anywhere.

I've been using callbacks like this so far:

function one(param, callback){
    //do stuff to param1
    callback()
}


function two(param){
    //do more stuff to param1
}

one(myParam, two)

This seems to work fine. However, I want to use three functions. This doesn't work:

function one(param, callback){
    //do stuff to param1
    callback();
}

function two(param, callback){
    //do more stuff to param1
    callback();
}

function three(param){
    //do even more stuff to param1
}

one(myParam, two(three))

I'm guessing this is because of the brackets when passing two as a parameter in one, making 'two' excecute immediately.

How do I structure my code so I can excecute the function in the correct order?

Answer 1

This is because you setting three as a parameter of two:

 function one(param1, callback){ alert(param1); callback("Second Called", three); } function two(param1, callback){ //do more stuff to param1 alert(param1); callback("Third Called"); } function three(param1){ alert(param1); //do even more stuff to param1 } one("First Called", two); 

Answer 2

You need to make little correction.

function one(param1, callback){
   //do stuff to param1
   // assuming param1 contains the processed value
    callback(param1,three);
 }

function two(param1, callback){
  //do more stuff to param1
  callback(param1);
}

function three(param1){
   //do even more stuff to param1
}
// call the function like this
one(myParam,two);

Have a look on the library Async.js. Its good for handling asynchronous activity. You can better handle such cases and your code will be much more readable.

Answer 3

function one(param, callback){
    //param = "apple"
    callback(param);
}

function two(paramFromOne){
    //paramFromOne = "apple"
    three(paramFromOne)
}

function three(paramFromTwoViaOne){
    //paramFromTwoViaOne = "apple"
}

//you are invoking two before it can do anything inside the callback context of one
//one("apple", two(three))

//do this instead
one("apple", two)

If you want to specify callbacks that two uses you have to use a closure

function one(param, callback){ 
    //param = "apple"
    callback(param) //the callback here is the returned function in two
}

function two(callback){ //three
    return function(paramViaOne) {
        //paramViaOne = "apple"
        callback(paramViaOne);
    };
}

function three(paramFromTwoViaOne){
    //paramFromTwoViaOne = "apple"
}


one("apple", two(three)) //two(three) returns an anonymous function that is used by one

Answer 4

You could simply control the sequence of execution using an array and a forEach loop.

var callbacks = [one, two, three];
callbacks.forEach(function(callback){
    callback(param);
});

Ofcourse the assumption here is that the scope of param is global to all of these callback functions.