JavaScript statements are always executed line by line. However, since JQuery effects require some time to finish, the following lines of code may get executed while the previous effects are still being executed. This is bound to create errors and overlapping of effects and animations.
To prevent this from occurring JQuery provides a callback function for each effects.
A Callback() function is executed once the effect is complete. It is always written at as the last argument of the method.
Syntax:
$(selector).effect_function(speed, callback);
Approach:
We will not use the callback function and try to code of toggling a div element. In the meantime, we will be going for an alert (Javascript browser alert) to show, how the callback() is useful to us.
Examples-1: We define a div, and add a button below the div. Now we make the button allow the div to hide using a simple JQuery Code.
<!DOCTYPE html> <html lang="en"> <head> <title>Callback function </title> <script src= </script> <style type="text/css"> p { background: white; border: 1px green solid; font-size: 30px; padding: 30px; text-align: center; color: green; } button { background: orange; 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() { // toggle the div, using slideToggle effect. $("p").slideToggle("fast"); //alert outside callback alert("We didnot use the callback() function :"); $('#b').text("Show it!"); }); }); </script> </head> <body> <p>GeeksForGeeks</p> <button id="b" type="button"> Hide it! </button> </body> </html> |
Output:
Before click:
Alert after click:
After click:
Example-2: Now we add the callback function inside the slideToggle()
Check out the code and the difference:
<!DOCTYPE html> <html lang="en"> <head> <title>Callback function </title> <script src= </script> <style type="text/css"> p { background: white; border: 1px green solid; font-size: 30px; padding: 30px; text-align: center; color: green; } button { background: orange; 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() { $("p").slideToggle("fast", function callback() { $('#b').text("Show it!"); // alert define inside the callback alert("Now we use the Callback()"); }); }); }); </script> </head> <body> <p>GeeksForGeeks</p> <button id="b" type="button">Hide the Div</button> </body> </html> |
Output:
Before click:
Alert after click:
After click:
Recommended Posts:
- How to perform jQuery Callback after submitting the form ?
- How to call functions after previous function is completed in jQuery ?
- How to Display/Hide functions using aria-hidden attribute in jQuery ?
- Implementing callback in PHP
- What is callback hell in Node.js ?
- Node.js | Callback Concept
- Difference between regular functions and arrow functions
- How to create a custom callback in JavaScript?
- JavaScript | Passing parameters to a callback function
- How to convert an existing callback to a promise in Node.js ?
- How to create a JavaScript callback for knowing if an image is loaded ?
- Inverse functions and composition of functions
- How to operate callback-based fs.readdir() method with promises in Node.js ?
- How to operate callback-based fs.mkdir() method with promises in Node.js ?
- How to operate callback-based fs.rename() method with promises in Node.js ?
- How to operate callback-based fs.opendir() method with promises in Node.js ?
- How to operate callback-based fs.lstat() method with promises in Node.js ?
- How to operate callback-based fs.truncate() method with promises in Node.js ?
- How to operate callback-based fs.readFile() method with promises in Node.js ?
- How to operate callback based fs.appendFile() method with promises in Node.js ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
