Topics

jQuery Callback

In JavaScript, statements are executed line by line. However, the jQuery effect takes some time to finish the next line code and may execute it while the previous effect is still running. In other to avoid this, jQuery provides a callback function for every effect method.

The callback function is a function that executes once the effect is complete. It is passed as an argument for the effective methods and appears as the last argument of the method. Take, for instance, the basic syntax of the jQuery slideToggle() effect method with a callback function is given as:

$(selector).slideToggle(duration, callback);

jQuery Callbacks

Let’s consider the example below where we've placed the slideToggle() and alert() statements next to each other. When you try this code the alert will be displayed immediately if you click the trigger button without waiting for the slide toggle effect to complete.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Effect Method without Callback Function</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        background:yellow;
        font-size: 24px;
        padding:20px;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>
</head>
<body>
    <p>This is paragraph.</p>
    <button type="button">Click me</button>
</body>
</html>

Try with example

Below is the modified version of the example above, here we have placed the alert() statement inside a callback function for the slideToggle() method. Hence, when you try this code the alert message will be displayed once the slide toggle effect has been completed.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Effect Method with Callback Function</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        background:yellow;
        font-size: 24px;
        padding:20px;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>
</head>
<body>
    <p>This is paragraph.</p>
    <button type="button">Click me</button>
</body>
</html>

Try with example

Same also, you can define the callback functions for different jQuery effect methods, e.g show(), hide(), fadeIn(), fadeOut(), animate(), and so on.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Callback Executed Multiple Times</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    h1{
        display:none;
        background:red;
        padding:20px;
    }
    p{
        background:yellow;
        font-size: 24px;
        padding:20px;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>
</head>
<body>
    <h1>This is heading</h1>
    <p>This is paragraph.</p>
    <button type="button">Click me</button>
</body>
</html>

Try with example

Finally, when you click the code in the example above, it will display the same alert message two times once per <h1> and <p> element, upon clicking the trigger button.