jQuery | Callback Functions

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.

filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
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() {
                $("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>

chevron_right


Output:

Before click:

Alert after click:

After click:



My Personal Notes arrow_drop_up

Developer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.