jQuery 回调函数

在本教程中,你将学习如何为 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> 元素显示两次相同的警报消息。