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>