CODEWITHSUNDEEP
javascriptcallback
Armaan Labib
Armaan Labib

Reputation: 165

Advantages of Call Back Function in plain English with real examples?

I was searching about call back functions and what I understood so far is call back function is a function which is passed as an argument to another function.

Why to use call back functions? What are the advantages of Call Back Functions? There are a lot of answers available on stack overflow and other websites but none of them helped me to understand the real advantages of call back.

Upvotes: 1

Views: 317

Answers (2)

Greg
Greg

Reputation: 1503

The advantages mainly shows in asynchronous functions.

  1. Prevent unnecessary checking in your script code. For example, using ajax to get response: var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { // things you want to perform after request is done. }; xhttp.open("GET", url, true); xhttp.send();
    In this way, you don't need to continuously check whether the request is done like using setInterval(...).

  2. Handling DOM events. All of the DOM events need to handle with callbacks, because you can't predict when the event will be triggered.
    For example:
    object.onclick=function(){// things you want to perform after the object is clicked};

  3. Create an extensible api or plugin. For example:
    var yourApi = function(passInCallback){ var args; //do some common things... passInCallback(args); }
    Then your api users can perform different behaviors after execute common functions.

That's all I can come up with for now.

Upvotes: 2

Ben Aston
Ben Aston

Reputation: 55729

JavaScript has a single thread of execution.

JavaScript does not preempt the running thread.

Nothing else in your program code can run until the call stack has been emptied. This is called "run to completion".

Therefore anything that runs in your program blocks everything else (literally EVERYTHING).

So if you have anything that is bound by anything other than CPU (like a network request, or waiting for the user), then it is very wasteful in terms of CPU because the thread of execution is blocked by simply waiting for something to happen. So the CPU sits idle.

The JavaScript runtime therefore provides mechanisms for avoiding this scenario. It makes functionality that is characterised by waiting (like network requests) asynchronous.

This means that the JavaScript thread of execution can continue, while the runtime does the waiting for you.

You can supply a callback to these asynchronous functions to specify the continuation. i.e. where the control flow should pick up from when the asynchronous operation is completed.

When the asynchronous operation completes, the runtime puts a "Job" on a "Job Queue" internal to the runtime.

These Jobs encapsulate the function pointer (callback) and the arguments to be used in the invocation of the callback.

When the call stack is next empty and when other Jobs in the Queue have completed, then the Job is removed from the Job Queue and a stack frame is instantiated ("Execution Context") and placed on the stack.

The runtime then begins executing from this stack frame.

Sometimes this kind of behavior is wrapped in a promise API to make it even more convenient, but the mechanics are the same.

setTimeout(callback, 2000);
document.write('Cool, I can do some stuff while the setTimeout is waiting.');

function callback() {
  document.write('Hello from the callback.');
}

Upvotes: 1

Related Questions