Today lets see how callback methods or anonymous functions work. We also show you the anatomy of callback methods.
callback methods are very important for achieving asynchronous way of coding.
HTML file
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < !DOCTYPE html> <html> <head> <title>callback or anonymous function</title> <script src="jquery-1.10.2.min.js"></script> <script src="myScript.js"></script> </head> <body> <p></p> <div></div> </body> </html> |
Here we have included jQuery library and myScript.js We also have a paragraph tag and a div tag, to be filled with some data by myScript.js file.
JavaScript file
myScript.js
1 2 3 4 | $(document).ready(function(){
$("p").hide("slow");
alert("Stop!");
}); |
Here the paragraph hide is called and before it finishes hiding, alert is called and every other operation of the webpage is halt until the user responds to the alert window. But if we want the paragraph to be hidden first and only after the paragraph is completely hidden we need to call the alert, in such case use callback methods as shown below:
JavaScript file: callback method
myScript.js
1 2 3 4 5 | $(document).ready(function(){
$("p").hide("slow", function(){
alert("Stop!");
});
}); |
If you want multiple things to occur after hiding the text(in above case) , you can nest the callback methods.
Anatomy of callback methods
JavaScript file: callback method
myScript.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(document).ready(function(){
eat("pizza", "cola", function(){
$("div").html("I had my food!");
});
});
function eat(food, drink, callback)
{
$("p").html("I ate "+food+" and had a "+drink);
if(callback && typeof(callback) === "function" )
{
callback();
}
} |
Here we have a method called eat, which takes 3 parameters. First two are variable type and the 3rd parameter is a function type argument.
Once the page loads, we call eat method and pass pizza, cola and a callback method to it. After the first 2 variable values are displayed, eat method checks if the 3rd parameter is actually present and is a function – if so, it’ll call the function. So, the callback method is called after its preceding arguments are processed.
Anatomy and Working of Callback methods / anonymous functions
[youtube https://www.youtube.com/watch?v=lIPOER59ZSY]
Examples:
1. If we have calls to Facebook API, Twitter API and Google Finance API’s: Using JavaScript(jQuery or nodejs) we could send the request to all these API’s concurrently and not worry much about its response time. Once any of these API’s respond, the corresponding callback methods are called. So while these scripts are executed, it binds the callback methods to its calls, and then stops worrying about its response!
2. Many ad networks have implemented asynchronous ad codes, since these codes use callback methods and there is no need for the webpage to wait until the ad server responds. If and when the ad server responds with an ad, the page or the ad spot is filled with the ad.