Use of callback function in JQuery

JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This will cause to trigger the errors.

To prevent this, you can create a callback function.

A callback function is executed after the current effect is finished.


With Callback function:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide("slow", function(){
            alert("The paragraph is now hidden");
        });
    });
});
</script>

Without Callback function:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000);
        alert("The paragraph is now hidden");
    });
});
</script>

The difference between these two function is without callback function will throw the alert box before the hide event is finished.