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://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://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://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>

打印页面