JQuery Callback Function

It is reference to executable code or piece of executable code that is passed as an argument from other method which is invoked due to some kind of event. It can be used as base to define functionality for new components. When you are executing the JavaScript code, you may get errors if you try to run code even though when effect is not accomplished. To accomplish this, you can make use of callback function. The callback function will be executed after the current effect is completed. Finally,the callback function will get fired when DOM component is ready.

The callback() provides following methods:

  • callbacks.add(): It adds callback to callback list.
  • callbacks.disable(): It disables callback list.
  • callbacks.empty(): It removes all callbacks from the list.
  • callbacks.fire(): It calls all the callbacks with given arguments .
  • callbacks.has(): It determines whether callback is in list or not.
  • callbacks.lock(): It is used to lock callback list.
  • callbacks.remove(): It removes callbacks from callback list.

JQuery Callback Function Syntax

$(selector).hide(speed,callback);

Creating Custom Callback Function

<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Custom Callback</title>
</head>
<body>
   <script type="text/javascript">
      function myFunction(value1, value2, value3, callback) {
        document.write('Welcome to jQuery web site..\n\nIt has: ' + value1 + ', ' + value2+ ',' +value3);
        callback();
      }
   myFunction('HTML', 'CSS','JAVASCRIPT', function() {
        document.write('Before studying jQuery ,we must know about html, css , and javascript.');
      });
</script>
</body>
</html>

As shown in above code, we have used a function called myFunction which accepts four parameters and fourth parameter is callback function. When function executes it spits the display message with the passed values displayed and it executes the callback function.

We can see that callback is without parenthesis, but when the callback is executed, it’s done using parentheses. The callback function passed to the function call. That code has another display message which informs that the callback code has now executed.

When you run the above example, you would get the following output:

Custom Callback

Example

Following example has callback function which will be executed after the hide effect is completed.

<!DOCTYPE html>
<head>
   <title>Callback object</title>
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
        $("p").click(function() {
        $("p").hide("fast",function(){
           document.write("The line is hidden now..");
          });
          });
        });
</script>
</head>
<body>
   <p>After clicking on this line, this line will be hidden.</p>
</body>
</html>
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready.
  • $(“p”).click(function() line determines click event which occurs when element is clicked. It contains function which specifies the function to run when click event occurs.
  • $(“p”).hide(“fast”,function(); line hides the selected elements with fast movement.
  • After executing above program, the line will be displayed which is defined in the body. After clicking on that line, line will get hidden.

When you run the above example, you would get the following output:

callback object1

callback object2

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*