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>
Leave a Reply