Callback in a callback?

Question

I wrote a callback (I believe it's called) like this:

hugeFadeIn();

It's a simple code to fade in some content so that I don't reuse the same code over and over again.

I then wanted to execute some code after hugeFadeIn finishes... So I did this:

hugeFadeIn(){
    //la la la
});

And that was wrong, so I did this:

$(hugeFadeIn(){
    //la la la
});

And I'm still getting errors. What am I doing wrong? Thanks everyone :)

Edit As requested, the body of the hugeFadeIn function:

function hugeFadeIn() {
    $("#huge-loader").fadeIn("fast");
}

Why don't you just put the two functions one after another? Or is the hugeFadeIn() only used as a callback function? — Dominik Sandjaja, Jan 10 '12 at 15:30

score 2 · Accepted Answer · answered Jan 10 '12 at 15:31

2

If you want to run something after hugeFadeIn finishes, you need to pass your callback in.

function hugeFadeIn(after) {
    // whatever
    after();
}

(If hugeFadeIn does the fade itself and doesn't rely on calling something that itself takes a callback.)

Edit after OP edit.

function hugeFadeIn(after) {
    $("#huge-loader").fadeIn("fast", after);
}

answered Jan 10 '12 at 15:31

Dave Newton

158,873
26
254
302

Thanks Dave, what does the `after` mean? Is that real or just used as an example? – pufAmuf Jan 10 '12 at 15:35
@pufAmuf It's the name of the function parameter, like any function declaration. – Dave Newton Jan 10 '12 at 15:36
[see the documentation for fadeIn](http://api.jquery.com/fadeIn/). If you want to run a function `myFunc` after the fade finishes, you should pass this function as a second arg to `fadeIn(...)`: `$("#huge-loader").fadeIn("fast", myFunc)`. the easiest way to do so is to declare a parameter in `hugeFadeIn` like it's done in the post above and then call `hugeFadeIn(myFunc);` – akoptsov Jan 10 '12 at 15:44

score 1 · Answer 2 · answered Jan 10 '12 at 15:31

1

close...

hugeFadeIn(function() {

    alert('My callback is running');

});

Then in hugeFadeIn()

hugeFadeIn = function( fn ) {

    fn();

}

answered Jan 10 '12 at 15:31

Seth

6,240
3
28
44

Hi Seth, thanks for the answer! May I ask however, that that code inside `hugeFadeIn` does (the second one)? – pufAmuf Jan 10 '12 at 15:37
I don't understand the assignment to `hugeFadeIn`. – Dave Newton Jan 10 '12 at 15:37
Is that aimed at me? The reason was for me to use one code that could easily be reused everywhere and changed without having to change everything one by one. – pufAmuf Jan 10 '12 at 15:40
@pufAmuf No, it's addressed to Seth. I misunderstood the "in hugeFadeIn" sentence, because you wouldn't put the snippet "in hugeFadeIn", rather that *is* the definition of `hugeFadeIn`, for some reason using function assignment rather than declaration. – Dave Newton Jan 10 '12 at 15:47
The first block of code is referencing the callback that you needed which will run once the function is complete. The second block of code is the function itself that runs before the callback. – Seth Jan 10 '12 at 19:44

jack-all-trades · Answer 3 · 2012-01-10T16:36:05.767

1

function hugeFadeIn(time, callback) {
    $('.something').fadeIn(time, callback);
}

So then

hugeFadeIn(500, doAjaxWhathever);

or something like this for async

$.HugeFade = function(item, time, callback) { $(item).fadeIn(time); callback();}
$.HugeFade('#myDiv', 1500, myCallback);

But if you're using hugeFadeIn as a callback, you can't do this

$('#myDiv').load(url, hugeFadeIn(500, callback2)); //wrong
// it should be..
$('#myDiv').load(url, function(){hugeFadeIn(500, callback2)});

edited Jan 10 '12 at 16:36

answered Jan 10 '12 at 15:33

jack-all-trades

282
1
4
18

Not really; `fadeIn` is asynchronous. – Dave Newton Jan 10 '12 at 15:35

score 1 · Answer 4 · answered Jan 10 '12 at 15:44

1

if you need to do something with the same element just put call of second method after first one

hugeFadeIn();
someOtherMethodCall();

If you need to deal with other element on the page and you need to force calling second method after first method finish - use delay method (http://api.jquery.com/delay/)

hugeFadeIn();
someOtherMethodCall();

someOtherMethodCall(time){
  $('#some-id').delay(time).hide();
}

answered Jan 10 '12 at 15:44

Slawomir Pasko

907
8
14

Why not use the built-in facilities of jQuery instead? – Dave Newton Jan 10 '12 at 15:49

score 1 · Answer 5 · answered Feb 07 '12 at 19:06

when i write a function, i usually put a parameter for callback :

function myFunction(param1, callback_param){

    alert(param1); // do stuff here 

    if(typeof(callback_param) == "function"){

        callback_param();

    }
}

and here's how i call it.

myFunction('Hello World', function(){
     alert('Yes!, this is the World, how can i help you?');
});

hope this contributes. thanks

Callback in a callback?

5 Answers5

Linked