jQuery 回调函数

一个 jQuery 回调函数 是仅在当前效果完成后执行的函数。本教程将解释什么是 jQuery 回调函数 以及为什么要使用它们。

以下是任何jQuery效果方法的简单语法：

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

如果我们稍微详细一些，那么jQuery回调函数将被写成如下的格式：

$(selector).effectName(speed, function(){
   <!-- function body -->
});

没有回调函数的示例

首先，我们来看一个不使用回调函数的jQuery程序，所以这里的警报消息在隐藏效果完成之前就被显示出来。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("div").click(function(){
         $(this).hide(1000);
         alert("I'm hidden now");
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px; cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>Hide Me</div>
   <div>Hide Me</div>
   <div>Hide Me</div>
</body>
</html>

jQuery回调函数

由于JavaScript（jQuery）代码的异步性质，jQuery回调函数是必需的。jQuery效果可能需要一些时间来完成，因此在效果仍在执行时，下一行代码有可能被执行。为了处理代码的异步执行，jQuery允许在所有的效果方法中传递一个回调函数，该回调函数的目的是在效果完成时被执行。

示例

让我们再次重写上面的示例，这次我们使用一个回调函数，在隐藏效果完成后执行它：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("div").click(function(){
         $(this).hide(1000, function(){
            alert("I'm hidden now");
         });
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px; cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>Hide Me</div>
   <div>Hide Me</div>
   <div>Hide Me</div>
</body>
</html>

回调动画

jQuery animate() 方法还提供了使用回调函数的功能。

示例

下面的示例使用了一个回调函数，在动画效果完成后执行：

<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("#right").click(function(){
          $("div").animate({left: '250px'}, 1000, function(){ alert("I have reached to the right"); }); });$ ("#left").click(function(){
         $("div").animate({left: '0px'}, 1000, function(){
            alert("I have reached to the left");
         });
      });
   });
</script>
<style>
   button{width:100px;cursor:pointer}
   #box{position:relative;margin:3px;padding:12px;height:100px; width:180px;background-color:#9c9cff;}
</style>
</head>
<body>
<p>Click on Left or Right button to see the result:</p>

<div id="box">This is Box</div>
<button id="right">Right Move</button>
<button id="left">Left Move</button>
</body>
</html>