How to use callback function in JavaScript functions

Question

I am very new to JavaScript and need to use callback function in my java script function. I don't know how to use a callback function. Below is my code:

function SelectedFeature() { 
 // Here is my code  call_Method1(); 
 call_Method2(); 
 }

The problem in the above function is that, call_method2() starts executing before call_Method1() ends its execution. To solve this problem, someone told me to use a callback function. Now how can I use callback function in my SelectedFeature() function? Please explain by using code sample.

I'm making an asynchronous request in call_method1(). I need call_Method2() should be called after completing execution call_method1(). But in my case, call_method2() calls before call_method1() completes its execution. Now how can I fix this?

I dont think that call_Method2(); starts beforre call_Method1() ends. I'm pretty sure (it must be) that call_Method1() returns correctly. The problem is, as you already said, the asynchronous call IN method1. And to solve this problem its needed to see the code of your call_Method1(); To know how your asynchronous call looks like and how you can then use a callback. — Chris, Mar 13 '11 at 12:23

Felix Kling · Answer 1 · 2011-03-13T12:33:23.153

7

You have to refactor call_method1() to accept and execute a callback after it finished execution:

call_method1(call_method2);

and

function call_method1(callback) {
    // ...
    // do asynchronous stuff, when the response is processed, call
    if(typeof callback === 'function') {
        callback();
    }
    // ...
}

Functions are first class citizens, so by referring to them by their name, you can pass them around like any other value.

We could help better if you post the code for call_method1.

edited Mar 13 '11 at 12:33

answered Mar 13 '11 at 12:25

Felix Kling

795,719
175
1,089
1,143

i would add an if statement to check that typeof callback == 'function'. just for safety. – yoavmatchulsky Mar 13 '11 at 12:29
@yoavmatchulsky: Good point... I was just lazy ;)... will add it. – Felix Kling Mar 13 '11 at 12:32
you can use == instead of a strict ===, since typeof will always return a string. :D – yoavmatchulsky Mar 13 '11 at 13:20
You don't need `typeof` either: `if (callback.constructor == Function)` will do too – KooiInc Mar 13 '11 at 15:54

score 0 · Answer 2 · answered Jan 30 '14 at 20:34

The question has already been answered above by Felix. Inspired by his answer and an issue I am having in a current project, I wrote a little gist that has a class that adds up a little extra safety.

To sum up, you pass a callback function just as the way you pass a variable. Then the receiver will trigger it as a function.

myCoolFunction: function( data ) {
  // Do some thing with response
}

$.get( '/some/cool/url', myCoolFunction );

In the above $.get calls back myCoolFunction with the parameter data once the data is fetched

What happens if myCoolFunciton is a variable. Well it depends on how the receiver handles the input.

Just to be careful, I have a CoffeeScript class ( and its JavaScript compilation ) that will do some safety checks.

It doesn't do any thing magic, checks if its a function and returns, if not returns an empty function so that it would reduce possibility of JS error. https://gist.github.com/ziyan-junaideen/8717925

score 0 · Accepted Answer · answered Mar 13 '11 at 12:24

What are you using to do your asynchronous call? Did you code it yourself or are you using a library like JQuery?

You could simply put a bool to say "working" that you set to true as method 1 starts and back to false when it finishes. you could then have method2 wait while working is true.

How to use callback function in JavaScript functions

3 Answers3

Linked