Can Someone Explain me the Callback functions?

Question

I've started recently to learn about javascript, and I saw a lot of callback functions. What are those functions, why they are used and what for? I will be happy to get really basic definition, because I wanna understand it because I realised that it is really important in js.

thanks :)

Answer 1

A callback function is a function you pass as an argument to another function.

The callback function will be called by the function you pass it to (or one further down the chain).

This is typically done when the function is doing something asynchronous, so you can't use a return value.

The main examples are for events:

// call someFunction when the document is loaded
addEventListener('load', someFunction);

or time related calls:

// call someFunction after 30 seconds have elapsed
setTimeout(someFunction, 30000);

Answer 2

As we know we can pass different type of variable, object as function's parameter . In javascript if a function is passed as parameter then it is called Callback funbction.

The callback function is called on some event/condition till then the program can execute other code. The callback function would executed only when the particular event is occurred or particular condition is satisfied.

Answer 3

As the name suggests, callback functions are anonymous or named functions that are passed as arguments to another function, or an AJAX call etc. and will be executed after a certain action is completed by the javascript engine.

For eg. You can pass a callback function to be executed once an AJAX call has returned with data. Ill use jQuery for simplicity :

$.ajax( {
  url: "/my-api-path/",
  data: myParams
}).done(myCallback);

Here, myCallback is a function that will be executed once the AJAX call completes. The callback function in this case will be called with the response object returned by the AJAX call. Notice how this callback has been passed as an argument to the .done method provided by jQuery's AJAX API.

In another example,

setTimeout( 
function() { 
alert("Im inside a callback function!"); 
}, 2000 );

Here the function that contains the alert is the first of the two arguments passed to the setTimeout method in javascript. The second being the amount of milliseconds after which this function should be executed. Since this function does not have a name it is called an anonymous function.

The same code could be re-written as :

var myCallback = function(){ 
   alert("Im inside a callback");
};
setTimeout(myCallback, 2000);

Callbacks are executed immediately when the action completes. So after the engine encounters the setTimeout statement it will store the myCallback function in a reference and then continue execution after the setTimeout statement. Once 2 seconds elapse, it will realise its time to execute the callback so execution will jump to the callback. Then the alert will execute, the callback function will terminate and execution will continue back from where it was when 2 seconds elapsed and the engine jumped to the callback.

Hope this explains how callbacks work.