jQuery Callback Function

jQuery, built upon JavaScript, inherently operates by processing statements sequentially. However, conflicts may arise with effects executing concurrently, potentially leading to errors and unforeseen outcomes. This behavior extends to jQuery code, but animations introduce a shift in this execution order.

Consider this example of a simple animation using the fadeOut() method, which fades out an element over a specified duration:

$("#myElement").fadeOut(1000, function() { alert("Element has faded out!"); });

In this example, the second argument passed to the fadeOut() function is a callback function. The animation begins, and once the fading effect is complete, the provided callback function is executed, triggering the alert message.

callback functions

When animation is employed, the subsequent line of code may proceed before the prior one concludes. To rectify this, callback functions establish a queue, enforcing a sequence where one effect finishes before another commences. This ensures structured execution and precise timing, augmenting the stability and predictability of code in the jQuery framework.

var div = $("div"); div.animate({height: 600,width: 800}, 2000,function(){ alert("Animation Finished !!"); });

In the above code, the callback function is visibly defined within the third argument of the function call. Notably, this code also incorporates an additional alert message to signify the execution of the callback code. This approach underscores the asynchronous nature of callbacks, where the specified code is triggered once the initial function completes its operation, enhancing control and organization within the code execution flow.

run this source code Browser View
jQuery Callback()
Full Source
<html> <head> <title>jQuery Callback example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnStart").click(function(){ var div = $("div"); div.animate({height: 600,width: 800}, 2000,function(){ alert("Animation Finished !!"); }); }); }); </script> </head> <body> <button id="btnStart">Start Animation</button> <div style="height:150;width:200;background:green;position:absolute;"> jQuery Callback() </div> </body> </html>

The example below has no callback parameter , and the alert box will be displayed before the animation effect is completed:

$("#btnStart").click(function(){ var div = $("div"); div.animate({height: 600,width: 800}, 2000); alert("Animation Finished !!"); });
run this source code Browser View
jQuery Callback()
Full Source
<html> <head> <title>jQuery Callback example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnStart").click(function(){ var div = $("div"); div.animate({height: 600,width: 800}, 2000); alert("Animation Finished !!"); }); }); </script> </head> <body> <button id="btnStart">Start Animation</button> <div style="height:150;width:200;background:green;position:absolute;"> jQuery Callback() </div> </body> </html>

Conclusion

The power of callback functions lies in their ability to manage the sequence of actions in an asynchronous environment. They enable you to specify what should happen next once a certain operation has concluded. This is essential for tasks that require waiting for data retrieval, animations, or other time-consuming processes. Callbacks promote structured, controlled execution and enhance the overall responsiveness of your code.






Related Topics
  1. Show and Hide Effect in jQuery
  2. Fade effect in jquery
  3. Sliding Effect in jquery
  4. jQuery Effect animate() Method
  1. jQuery queue(), dequeue() and clearQueue()
  2. jQuery Stop() finish()
  3. jQuery Shake Effect