Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery | Callback Functions

  • Last Updated : 27 Feb, 2019

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!