Callback function
A Callback function is function which gets executed if current effect has been executed completely. Jquery methods are executed line by line, so if there are more than one effect which are one after the other than the effect next to current effect may get executed even if the current effect is not yet completed. This can create errors, to avoid this we have callback functions in jquery.
Syntax :
$(selector).hide(speed,callback);
Example : with callback
1 2 3 4 5 6 7 | $(function(){ $("p").click(function(){ $(this).hide("slow",function(){ alert("hide effect is over, that is why you are seeing this"); }); }); }); |
In the above example on the click of <p> element it will start hiding and the alert will not appear until the hide effect is completely over.
The complete code is as follow :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <html> <head> <title>First jquery example</title> <!-- This line will load the bootstrap css file --> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <!-- This file will load jquery file so that we can use its function --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> </head> <body> <div class="panel panel-primary"> <h3 class="text-primary" align="center">jquery example : With callback</h3> <div class="panel panel-primary"> <p align="center">Click on the this text and it will be hidden<br> And you will see an alert box when this text will be hidden completely</p><br> <!-- <p align="center">This is the second text to hide</p> --> </div> </div> </body> <script type="text/javascript"> /*Syntax for callback : $(selector).hide(speed,callback);/ /*javascript function are executed line by line, next line will be executed even if the effect is not yet over. To prevent execution of next line if the current line hasn't executed fully, callback functions are used. Below is an example of callback functiond which prevents the execution of alert before the text disappears completely. */ $(function(){ $("p").click(function(){ $(this).hide("slow",function(){ alert("hide effect is over, that is why you are seeing this"); }); }); }); </script> </html> |
Example : without callback
1 2 3 4 5 6 | $(function(){ $("p").click(function(){ $(this).hide("slow"); alert("You see this alert before the hide text effect is over") }); }); |
In the above example we have not used callback function, instead we have alert after the hide effect. Here, as soon as the hide effect starts the alert will appear before the hide effects gets over.
Complete example without a callback function is as follows :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <html> <head> <title>First jquery example</title> <!-- This line will load the bootstrap css file --> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <!-- This file will load jquery file so that we can use its function --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> </head> <body> <div class="panel panel-primary"> <h3 class="text-primary" align="center">jquery example : Without callback</h3> <div class="panel panel-primary"> <p align="center">Click on the this text and it will be hidden<br> And you will see an alert box before this text disapper</p><br> <!-- <p align="center">This is the second text to hide</p> --> </div> </div> </body> <script type="text/javascript"> /*Syntax for callback : $(selector).hide(speed,callback);/ /*javascript function are executed line by line, next line will be executed even if the effect is not yet over. To prevent execution of next line if the current line hasn't executed fully, callback functions are used. Below is an example of the which doesn't include callback function. */ $(function(){ $("p").click(function(){ $(this).hide("slow"); alert("You see this alert before the hide text effect is over") }); }); </script> </html> |
The complete working example can be downloaded from git also.
0 comments:
Post a Comment