Jquery 简明教程
jQuery - Callback Functions
jQuery Callback Function 是一个仅在当前特效完成后才会执行的函数。本教程将解释什么是 jQuery Callback Functions 以及为什么使用它们。
A jQuery Callback Function is a function that will be executed only after the current effect gets completed. This tutorial will explain you what are jQuery Callback Functions and why to use them.
以下是任何 jQuery 特效方法的简单语法：
Following is a simple syntax of any jQuery effect method:
$(selector).effectName(speed, callback);如果我们深入一些细节，一个 jQuery 回调函数将被编写如下：
If we go in a little more detail then a jQuery callback function will be written as follows:
$(selector).effectName(speed, function(){
<!-- function body -->
});Example without Callback Function
首先，让我们看一个不使用回调函数的 jQuery 程序，所以警报信息在 hide 特效完成之前就已经显示出来了。
First let’s take a jQuery program which does not make use of callback function so here alert message is being displayed even before the hide effect is getting completed.
<!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 Callback Functions
jQuery 回调函数是由于 JavaScript（jQuery）代码执行的异步特性所必需的。jQuery 特效可能需要一段时间才能完成，因此在特效仍在执行时，有可能会执行下一行代码。为了处理代码的异步执行，jQuery 允许在所有特效方法中传递一个回调，而此回调函数的目的仅在特效完成时执行。
jQuery callback functions are required due to asynchronous nature of Javascript (jQuery) code execution. jQuery effects may take sometime to complete, so there is a chance that the next lines of code may get executed while the effects are still being executed. To handle asynchronous execution of the code, jQuery allows to pass a callback in all the effect methods and the purpose of this callback function is to be executed only when the effect gets completed.
Example
让我们重新编写上面的示例，这一次，我们在 hide 特效完成后使用一个回调函数：
Let’s re-write the above example once again and this time we make use of a callback function which is executed after the hide effect is completed:.
<!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>Callback with Animation
jQuery animate() 方法还提供了使用回调函数的机制。
jQuery animate() method also gives provision to make use of a callback functions.
Example
以下示例使用了一个在 animate 特效完成后执行的回调函数：
The following example makes use of a callback function which is executed after the animate effect is completed:.
<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>