multiple callback functions in javascript

In my previous post i have explained about what is a callback function. In this post i am going to explain about multiple callback functions in javascript and how to use multiple callback functions.

Using two callback functions

A callback function is a function which is passed as a argument to the other function, and the callback function is "called back" inside that other function. Javascript also provides us to use multiple callbacks functions. We can pass two callback functions as argument to other function and we can call those two callback functions from that functions.

In the following example i am going to show you how we can use two callback functions

Example :

      function successcallBack(successData){
          alert(successData);
      }

      function errorcallBack(errorData){
          alert(errorData);
      }

     function checkNumbers(a,b,callback1,callback2){
          if(a==b)
              callback1('equal');
          else
              callback2('not equal');
     }

      checkNumbers(5,5,successcallBack,errorcallBack);

In the above example we are passing two numbers to "checkNumbers" functions and checking they are equal or not. If both the numbers are equal then we are calling successcallBack function and if the numbers are not equal we are calling errorcallBack function.

In this way you can use multiple callback functions in javascript.

For more posts on javascript visit: javascript

Read more...

CallBack functions in Javascript

After a lot of investigation about callback on many sites, i got some knowledge on what are the callbacks and why we use callbacks. So i just want to share my knowledge here so that it will help some new javascript learners.

What is a callback function

According to wiki "a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time".  Generally a callback function is a function which is passed as a argument to the other function(say FuncA), and the callback function is "called back" inside that other function(FuncA) hance the name callback.

Syntax: 

The following is the syntax for a simple callback function

function multiplier(arg1,arg2,callback)
{
     callback(arg1*arg2);
}

multiplier(2,3,function(result){
   //do something with result
})

In the above example a anonymous function is passed as a callback function to "multiplier" function. Then from that "multiplier" function we have called the callback function.

passing a function as a callback to another function

Generally functions take input in the form of arguments and returns a value using return statement. But using javascript we can do things a little differently. Instead of waiting for a function to complete by returning a value , we can use callbacks to do it asynchronously.(read more about asynchronous programming here: Asynchronous programming). This is more helpful when we are making some Ajax request or Requesting some data from database(which takes some time to finish) etc. Instead of waiting for the call back to be called we can keep on doing other things.

let's see a simple example which uses callback function

function doTotal(marks1,marks2,marks3,callback){
    var total=marks1+marks2+marks3;
    callback(total);
}

doTotal(90,95,80,function(total){
   var avg= total/3;
   alert(avg);
})

In the above example we have passed a callback function as a argument to doTotal function. The doTotal functions calculates the "total" and calls the callback function by passing "total" to it. Now the callback function uses that "total" to calculate the "average".

Note: Actually we don't need callback in the above example. This can be done by using a regular return statement. Because calculating the sum don't take much time. We mostly use calbacks in the cases where the function takes some time to finish(like ajax requests).

Named callback functions

In the above example we have used anonymous function(function with no name). Now see the same example in which i have used named function as a callback.

function doAverage(total){
     var avg= total/3;
     alert(avg);
}

function doTotal(marks1,marks2,marks3,callback){
    var total=marks1+marks2+marks3;
    callback(total);
}

doTotal(90,95,80,doAverage);

Make Sure the Callback is a Function

Whenever we are using callback we have to ensure that the value passed as a passback is a function. We can check this by using the below code

function doTotal(marks1,marks2,marks3,callback){
    var total=marks1+marks2+marks3;
    if(typeof(callback) == 'function')
        callback(total);
     else
       //some other code
}

doTotal(90,95,80,function(total){
   var avg= total/3;
   alert(avg);
})

Here we are testing the callback value using a typeof operator to ensure that whatever is passed is actually a function.

I hope this will give you a basic idea on callbacks.

To read about how to use multiple callbacks visit: multiple callback functions

For more posts on javascript/jquery visit:  javascript/jQuery

Read more...