jQuery - Callback Functions

Previous
Quiz

A jQuery Callback Function is a function that will be executed only after the current effect gets completed. This tutorial will explain you what are jQuery Callback Functions and why to use them.

Following is a simple syntax of any jQuery effect method:

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

If we go in a little more detail then a jQuery callback function will be written as follows:

 $(selector).effectName(speed, function(){ <!-- function body --> });

Example without Callback Function

First let's take a jQuery program which does not make use of callback function so here alert message is being displayed even before the hide effect is getting completed.

 <!doctype html> <html> <head> <title>The jQuery Example</title> <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script> <script> $(document).ready(function() { $("div").click(function(){ $(this).hide(1000); alert("I'm hidden now"); }); }); </script> <style> div{ margin:10px;padding:12px; border:2px solid #666; width:60px; cursor:pointer} </style> </head> <body> <p>Click on any of the squares to see the result:</p> <div>Hide Me</div> <div>Hide Me</div> <div>Hide Me</div> </body> </html>

jQuery Callback Functions

jQuery callback functions are required due to asynchronous nature of Javascript (jQuery) code execution. jQuery effects may take sometime to complete, so there is a chance that the next lines of code may get executed while the effects are still being executed. To handle asynchronous execution of the code, jQuery allows to pass a callback in all the effect methods and the purpose of this callback function is to be executed only when the effect gets completed.

Example

Let's re-write the above example once again and this time we make use of a callback function which is executed after the hide effect is completed:.

 <!doctype html> <html> <head> <title>The jQuery Example</title> <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script> <script> $(document).ready(function() { $("div").click(function(){ $(this).hide(1000, function(){ alert("I'm hidden now"); }); }); }); </script> <style> div{ margin:10px;padding:12px; border:2px solid #666; width:60px; cursor:pointer} </style> </head> <body> <p>Click on any of the squares to see the result:</p> <div>Hide Me</div> <div>Hide Me</div> <div>Hide Me</div> </body> </html>

Callback with Animation

jQuery animate() method also gives provision to make use of a callback functions.

Example

The following example makes use of a callback function which is executed after the animate effect is completed:.

 <html> <head> <title>The jQuery Example</title> <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script> <script> $(document).ready(function() { $("#right").click(function(){ $("div").animate({left: '250px'}, 1000, function(){ alert("I have reached to the right"); }); }); $("#left").click(function(){ $("div").animate({left: '0px'}, 1000, function(){ alert("I have reached to the left"); }); }); }); </script> <style> button{width:100px;cursor:pointer} #box{position:relative;margin:3px;padding:12px;height:100px; width:180px;background-color:#9c9cff;} </style> </head> <body> <p>Click on Left or Right button to see the result:</p> <div id="box">This is Box</div> <button id="right">Right Move</button> <button id="left">Left Move</button> </body> </html>
Print Page
Previous
Next
Advertisements