Welcome Guest! (App Version 3.1)

websitnero logo name

Callbacks

Callback Function

Whenever an asynchronous operation is done and after spending sometime there can be only 2 possibilities: First, either some data is returned or Secondly, some error has occurred. Now, Callback Function is the function that handles once the result of the operation is completed and the result is ready.

During all this meantime Javascript continues to execute its normal execution of code.

request('http://www.abcd.com', alpha);

In the code above the function alpha is not executed along with the http request but it waits till data is fetched via this request and then once it is fetched, the function alpha executes after waiting a while in the "Event Loop".

When we are passing a callback function as an argument to some other function, always remember that we are only passing the function definition and not executing it. In other words, we are not passing the function with the trailing pair of executing parenthesis (), just like we do when we are executing a function.

Note: "Callback Functions Are Closures"

On passing a callback function as an argument to another function, the callback is executed at some later point inside the containing function's body working as if the callback was defined in the containing function only. This gives the working effect of closure. And, as closures do have access to containing function's scope and variables, it can easily work or manipulate them.

Example

<script>

function alpha(callback){
  alert('hi');
  callback();
};

function beta(){
  alert('hello');
}

alpha(beta);

</script>

Callback Hell

When making asynchronous requests you use a callback to do something with the data being fetched, and then again based on data received you make another asynchornous request and so on ... then this long clumsy queue of non-blocking code is known as callback hell.

Chained events can quickly turn into an uncomfortable experience of Callback Hell. This most often takes place while retrieving JSON data response from independent API endpoints, where outcome of one API is dependent on another, and thus blocked till execution result of prior is received. This creates the mess of 'hello of callback chain'.

callEndPoint('api/getuserid', function(response){
  callEndPoint('api/getNoOfFollowers'+response.userID, function(response){
    callEndPoint('api/someOtherCall'+response.noOfFollowers, function(response){
      callEndPoint('api/someOtherCall'+response.someProp, function(response){
        callEndPoint('api/someOtherCall'+response.someProp, function(response){
          //and so on ...
        });
      });
    });
  });
});

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.