自定义函数中的回调函数

Question

is there a way to call a custom function after another completes. Lots of jquery includes a way to do a call back, like when an animation completes you can just give it another function as a last parameter. But is there anyway to string together function1(params, function1(){alert('2');}) or something? I honestly have no idea how it would look.

Thank you

Answer 1

You can create a function pointer with something like:

var yourCallback = function() {
    alert('2');
}

You can think of it as an object containing the function itself (not its return value). Since it is an object, you can pass it around to other functions.

Then pass that to the function you are calling as an argument (do not invoke it with () , as that would pass its return value):

function1(params, yourCallback);

Finally, in function1, invoke your callback when you need it:

function function1(args, callback) {
    //Some code
    if (callback) {
        callback();
    }
}

Answer 2

Technically the pattern you're asking for is:

function myFunctionNeedsACallback(param1, callback) {
    //do stuff with param1
    if(typeof callback === "function"){
        callback.call(yourThisParam, anyOtherParams);
    }
}

While this is a useful pattern... overuse will lead to ugly, untestable, and unmaintainable code. Use with discretion.

Your example would work just fine:

myFunctionNeedsACallback(param, function() { alert('2'); });

//will alert 2 after running the rest of the contents of the function

EDIT

To address thomas's situation:

function ajaxCall1(){
    return $.ajax(/*your parameters NO SUCCESS CALLBACK NEEDED*/);
}

function ajaxCall2(){
    return $.ajax(/*your parameters NO SUCCESS CALLBACK NEEDED*/);
}

function ajaxCall3(){
    return $.ajax(/*your parameters NO SUCCESS CALLBACK NEEDED*/);
}

$.when(ajaxCall1(), ajaxCall2(), ajaxCall3()).then(function(results1, results2, results3) {
    //do stuff with all 3 results without "nesting" things
});

Answer 3

function doSomething(arg1, callback){
    // bla bla bla
    callback();
}

Answer 4

You'd structure your function something like this:

function one(x, y, z, callback) {
   // do operations here

   callback();
}

Then, since functions are objects you could pass in a function through the callback parameter, IE:

one(1, 2, 3, function(){alert('hello');});

Or

var func = function() { alert('hello'); };
one(1, 2, 3, func);

Or

function func() {
  alert('hello');
}

one(1, 2, 3, func);

Answer 5

While callbacks are convenient, overuse can lead to ugly and unmaintainable code. Besides standard callbacks shown in other answers, you might want to look at other patterns like deferred/promises and AOP.

In jQuery, promises are implemented with when() and then() .

requirejs is also a good startpoint.