Callback Functions Execution in jQuery

Callback functions are function which can be invoked under certain conditions. These functions executes after current effect have been finished. As the effect completed, the function reference specified as callback will be executed.

JQuery statements are executed line after line in a sequence and perform action written. In case of effects discussed earlier, next line (whatever you write) will be execute before the effect completes its part. If the next line depends on the effect then it can create errors.

Callback function reference will execute after the current effect finished completely. These functions can easily remove those errors, here is the syntax:

$(selector).show(speed, callback);

Following example will show an alert after div is shown on the button click:

$("#btnShow").click(function(){
$("#divToShow").show("slow", function(){
alert("Div has been shown");
});
});

In the above code a callback function have been written that will show an alert message after div will show. If we don’t write any callback function then it will show an alert message without showing the div properly.

$("#btnShow").click(function(){
$("#divToShow").show(2000);
alert("Div has been shown");
});

This code will not wait for div to show and show an alert message specified. So these type of situations must have callback functions.