callback function vs calling a function from inside the function

Question

I'm trying to understand JS and I'm really confused by the callback pattern.

function one(){
    alert("I'm one!")
}

function total(arg, callback){
    setTimeout(function() {alert("I'm "+arg);}, 1000);
    callback();
}

total('all', one);

versus

function one(){
    alert("I'm one!")
}

function total(arg){
    setTimeout(function() {alert("I'm "+arg);}, 1000);
    one();
}

total('all');

What is the benefit of passing one() as a parameter vs just calling it from within the function?

It is basically the same thing. Callback makes the method reusable with other things. — epascarello, Nov 21 '15 at 22:26
http://stackoverflow.com/questions/9596276/how-to-explain-callbacks-in-plain-english-how-are-they-different-from-calling-o — epascarello, Nov 21 '15 at 22:32

score 3 · Answer 1 · answered Nov 21 '15 at 22:31

3

If you know that you're always going to call one, there's no need to accept it as an input parameter; you can just go ahead and call it.

The ability to accept callbacks allows you to easily write loosely coupled code.

You are, for instance, passing a callback to setTimeout in your code example. setTimeout knows to wait a given number of milliseconds before a function is called, but it doesn't know which function to call.

answered Nov 21 '15 at 22:31

David Hedlund

128,221
31
203
222

Completely agree with @david-hedlund - the main idea is that you might want to have a generic function `total` which can take any function and execute it inside of `total`. With your second approach, your `total` function is completely tied to the `one` function when it doesn't need to be. – wmock Nov 22 '15 at 01:46

score 1 · Answer 2 · answered Nov 21 '15 at 22:34

Passing in callback functions allows you to dynamically affect the flow of the program. Additionally, you could pass the outcome of total as a parameter to callback, which is often used to enable asynchronous programming.

function one(){
  alert("I'm one!")
}

function total(arg, callback){
  setTimeout(function() {
    if (callback) {
      callback();
    }
  }, 1000);
}

score 0 · Accepted Answer · answered Nov 21 '15 at 22:32

0

I suspect that your examples are not what was intended to showcase what a callback is. Does this make more sense?

function cb(arg){
    alert("I'm "+arg+"!")
}

function total(arg, callback){
    setTimeout(callback, 1000, arg);
}

total('one', cb);

answered Nov 21 '15 at 22:32

Touffy

6,309
22
28

score 0 · Answer 4 · answered Nov 21 '15 at 22:35

Callback argument allows you to define custom interaction. It's commonly used with any asynchronous operation to allow reacting of state change (for example when operation is done, or errored).

One example of that may be an AJAX call (here with jQuery for simpliciy):

var request = $.ajax({
    url: "script.php"
});

// this allows you to specify custom action handling
request.done(one);

callback function vs calling a function from inside the function

4 Answers4