jQuery 回调函数

Created: October-14, 2018

在本教程中，你将学习如何为 jQuery 效果定义回调函数。

jQuery 回调函数

JavaScript 语句是逐行执行的。但是，由于 jQuery 效果需要一些时间才能完成，下一行代码可能会在前一个效果仍在运行时执行。为了防止这种情况发生，jQuery 为每个效果方法提供了一个回调函数。

回调函数是一旦效果完成就会执行的函数。回调函数作为参数传递给效果方法，它们通常显示为方法的最后一个参数。例如，带有回调函数的 jQuery slideToggle() 效果方法的基本语法如下：

$(selector).slideToggle(duration, callback);

请考虑以下示例，其中我们将 slideToggle() 和 alert() 语句放在一起。如果试一下此代码，则单击触发按钮后将立即显示警报，而无需等待幻灯片切换效果完成。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

而且，这是我们将 alert() 语句放在 slideToggle() 方法的回调函数中的修改版本。如果你尝试此代码，则幻灯片切换效果完成后将显示警告消息。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

同样，你可以定义其他的 jQuery 效果方法的回调函数，如 show() ， hide() ， fadeIn() ， fadeOut() ， animate() 等。

注意： 如果效果方法应用于多个元素，则对每个选定元素执行一次回调函数，而不是对所有元素执行一次。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

如果你尝试上面的示例代码，它会在单击触发按钮时每次 <h1> 和 <p> 元素显示两次相同的警报消息。