Open In App

jQuery | Callback Functions

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

JavaScript statements are always executed line by line. However, since JQuery effects require some time to finish, the following lines of code may get executed while the previous effects are still being executed. This is bound to create errors and overlapping of effects and animations.
To prevent this from occurring JQuery provides a callback function for each effects.
A Callback() function is executed once the effect is complete. It is always written at as the last argument of the method.

Syntax:

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

Approach:
We will not use the callback function and try to code of toggling a div element. In the meantime, we will be going for an alert (Javascript browser alert) to show, how the callback() is useful to us.

Examples-1: We define a div, and add a button below the div. Now we make the button allow the div to hide using a simple JQuery Code.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Callback function
  </title>
    <script src=
  </script>
    <style type="text/css">
        p {
            background: white;
            border: 1px green solid;
            font-size: 30px;
            padding: 30px;
            text-align: center;
            color: green;
        }
          
        button {
            background: orange;
            border: 1px black dashed;
            font-size: 15px;
            padding: 10px;
            text-align: center;
            color: white;
            cursor: pointer
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button").click(function() {
              // toggle the div, using slideToggle effect.
                $("p").slideToggle("fast"); 
                
              //alert outside callback
            alert("We didnot use the callback() function :"); 
                $('#b').text("Show it!");
            });
        });
    </script>
</head>
  
<body>
    <p>GeeksForGeeks</p>
    <button id="b"
            type="button">
      Hide it!
  </button>
</body>
  
</html>


Output:

Before click:

Alert after click:

After click:

Example-2: Now we add the callback function inside the slideToggle()
Check out the code and the difference:




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Callback function
  </title>
    
    <script src=
  </script>
    
    <style type="text/css">
        p {
            background: white;
            border: 1px green solid;
            font-size: 30px;
            padding: 30px;
            text-align: center;
            color: green;
        }
          
        button {
            background: orange;
            border: 1px black dashed;
            font-size: 15px;
            padding: 10px;
            text-align: center;
            color: white;
            cursor: pointer
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button").click(function() {
                $("p").slideToggle("fast",
                       function callback() {
                    $('#b').text("Show it!");
                           
               // alert define inside the callback
                alert("Now we use the Callback()"); 
  
                });
            });
        });
    </script>
</head>
  
<body>
    <p>GeeksForGeeks</p>
    <button id="b" type="button">Hide the Div</button>
</body>
  
</html>


Output:

Before click:

Alert after click:

After click:



Last Updated : 27 Feb, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads