jQuery |回调函数

JavaScript 语句总是一行一行地执行。但是，由于 JQuery 效果需要一些时间才能完成，因此可能会在前面的效果仍在执行时执行以下代码行。这势必会产生错误和效果和动画的重叠。
为了防止这种情况发生，JQuery 为每个效果提供了一个回调函数。
一旦效果完成，就会执行Callback()函数。它始终写为方法的最后一个参数。

句法：

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

方法：
我们不会使用回调函数并尝试编写切换div元素的代码。同时，我们将使用一个警报（Javascript 浏览器警报）来显示 callback() 对我们有何用处。

Example-1：我们定义一个div，并在div下面添加一个按钮。现在我们使用简单的 JQuery 代码使按钮允许 div 隐藏。

  

    Callback function
  
    
  
    
        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
        }
    
    
        $(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!");
            });
        });
    

  

    GeeksForGeeks
    
      Hide it!
  

  

输出：

点击前：

点击后提示：

点击后：

示例 2：现在我们在slideToggle() 中添加回调函数
查看代码和区别：

  

    Callback function
  
    
    
  
    
    
        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
        }
    
    
        $(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()"); 
  
                });
            });
        });
    

  

    GeeksForGeeks
    Hide the Div

  

输出：

点击前：

点击后提示：

点击后：