jQuery 回调
在本教程中，您将学习如何为 jQuery 效果定义回调函数。
jQuery 回调函数
JavaScript 语句是逐行执行的。 但是，由于 jQuery 效果需要一些时间才能完成，因此下一行代码可能会在前一个效果仍在运行时执行。 为了防止这种情况发生，jQuery 为每个效果方法提供了一个回调函数。
回调函数是在效果完成后执行的函数。 回调函数作为参数传递给效果方法，它们通常作为方法的最后一个参数出现。 例如，带有回调函数的 jQuery slideToggle() 效果方法的基本语法可以通过以下方式给出：
$(selector).slideToggle(duration, callback);
考虑以下示例，其中我们将 slideToggle() 和 alert() 语句彼此相邻放置。 如果您尝试此代码，则单击触发按钮后将立即显示警报，而无需等待滑动切换效果完成。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>而且，这里是先前示例的修改版本，其中我们将 alert() 语句放置在 slideToggle() 方法的回调函数中。 如果您尝试使用此代码，则在幻灯片切换效果完成后将显示警报消息。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow", function(){
// 效果完成后要执行的代码
alert("The slide toggle effect has completed.");
});
});
});
</script>类似地，您可以为其他 jQuery 效果方法定义回调函数，如 show(), hide(), fadeIn(), fadeOut(), animate() 等。
注意： 如果效果方法应用于多个元素，则回调函数会为每个选定的元素执行一次，而不是全部执行一次。
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle("slow", function(){
// 效果完成后要执行的代码
alert("The slide toggle effect has completed.");
});
});
});
</script>如果您尝试上面的示例代码，它会在单击触发按钮时每个 <h1> 和 <p> 元素显示相同的警报消息两次。
Advertisements