What is a Callback Function in jQuery?
This article provides a brief introduction to the concept and use of callback functions in jQuery. By the end of the article, we will be having a clear picture of the callback functions and why they are actually needed.
- A callback is a function that will be executed only after the current effect gets completed.
- Since jQuery is a JavaScript library and JavaScript statements are executed sequentially, with animations, it might happen that even before the effect is completed, the following lines of code get executed. This can create errors due to overlapping of effects.
- Thus, to prevent such scenarios, jQuery needs callback functions.
- Callbacks in a way ensure that until a given effect is not finished, certain code does not execute.
- It is always used as the last argument of a function.
Syntax:
$(selector).hide(speed,callback);Parameters:
- speed: An optional parameter which specifies the speed of showing and hiding using the values: “slow”, “fast” or “milliseconds”.
- callback: Again, an optional parameter, which specifies the function to be executed after the hide() or show() methods is completed.
Implementations of Callback Function in jQuery
jQuery callback function executes only after a certain effect which is being executed gets completed. To better illustrate the concept of the jquery callback function, let us consider the below examples:
Example #1 – With Callback Function as a Parameter
- In the below example, a callback function is passed as a parameter to the hide function and will be executed only after the hide effect is completed.
- The callback function, here, defines an alert message to be displayed after the content is hidden.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta charset="utf-8" />
<title>JQuery Callback Function </title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> .button {
background-color: #33B0FF;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 3px;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("h2").hide("fast", function(){
// alert define inside the callback
alert("The content is now hidden");
});
});
});
</script>
</head>
<body>
<button class ="button" id="hide">Hide</button>
<h2>This is an example for callback function</h2>
</body>
</html>In the above lines of code, there is a button which on being clicked, will execute the hide() method on the given content and display an alert message that “The content is now hidden”. The alert will display only after the content is hidden.
Output:
Above is the screen which shows on the browser when the given lines of code are run. Till this time no button is clicked.
Once the “Hide” button is clicked, the above screen shows up on the browser displaying an alert message. One can notice that only after the hide effect is completed, the alert message pops up on the screen. This is how the callback function works.
Example #2 – Without Callback Function as a Parameter
Below is the example showing the effect when there is no callback function is used as a parameter. The alert box will be displayed even before the hiding is completed.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta charset="utf-8" />
<title>JQuery Callback Function </title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> .button {
background-color: #33B0FF;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 3px;
cursor: pointer;
}
</style>
</style>
<script>
$(document).ready(function(){
$("#hide").click(function(){ $("h2").hide(1000);
alert("The content will be hidden"); });
});
</script>
</head>
<body>
<button class ="button" id="hide">Hide</button>
<h2>This is an example without callback function</h2>
</body>
</html>Output:
The above screen displays when the given lines of code get executed. No button is clicked till now.
The above screen displays once the “Hide” button is clicked. Since there is no callback parameter specified in function, the alert message gets displayed even before the hide effect has completed.
Given below is another example where we have used callback function as a parameter with slideToggle() effect.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta charset="utf-8" />
<title>JQuery Callback Function</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> button {
background: #33b0ff;
border: 1px black dashed;
font-size: 15px;
padding: 10px;
text-align: center;
color: white;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("h2").slideToggle("slow", function callback() {
$("#hide").text("Show");
// alert is defined inside the callback
alert("This is Callback");
});
});
});
</script>
</head>
<body>
<h2>This is an example for callback function</h2>
<button id="hide" type="button">Hide the Content</button>
</body>
</html>Output:
Before the button is clicked.
After the button is clicked.
Once the animation is complete, the callback (alert) gets executed.
Summary:
- In JavaScript, since statements are executed line by line, it might create errors at times as even before a certain effect has not completed its execution, the other effect starts executing.
- To prevent such erroneous and unexpected situations due to overlapping of effects, callback function in jQuery comes into the picture.
- It prevents another effect from being executed until the time the previous effect has not completed.
- Simply put, a callback function creates a queue of effects enabling them to run one by one without getting them overlapped.
Conclusion
- This article showed the use of a callback function in jQuery, its implementation and the benefits of using it.
- Here, we have covered a small area on callbacks, there is a lot more to this.
- JQuery callback function is widely used in modern web application development for various tasks, such as the execution of asynchronous tasks, in event listening/handling, etc.
- It is a powerful tool to use and it provides great benefits to web applications.
- Should be used as and when the need arises.
Recommended Articles
This is a guide to Callback Function in jQuery. Here we discuss what is callback function in jquery along with the examples and code implementation respectively. You may also look at the following articles to learn more –
