jQuery Callback

Callback（回调函数）就是在动画或事件执行完之后再运行的函数。很多新手发现"动画结束后立刻执行的代码不生效"，原因就是没有使用回调——jQuery 的效果默认是异步的，动画还没结束，后面的代码就已经先执行了。

为什么需要回调

先看一个常见"坑"。下面的代码本意是：隐藏完成后弹出提示，实际却先弹提示、再慢慢隐藏：

$('#box').hide(1000);          // 开始 1 秒的隐藏动画
alert('段落已经隐藏了！');       // 这句立刻执行，动画还没播完

hide(1000) 只负责"发起"动画就立即返回，后续代码不会等它。要把"动画完成后"的动作接上，就必须把它写进回调函数。

带回调的写法

把要在动画结束后执行的函数作为最后一个参数传入：

// 隐藏完成后才弹提示，顺序正确
$('#box').hide(1000, function () {
    alert('段落已经隐藏了！');
});

回调函数的执行时机是动画完全结束之后，此时元素已经处于最终状态，可以在回调里安全地做后续处理。

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 引入 jQuery（https://example.com 为占位地址，实际使用时请替换为真实 CDN 或本地文件） -->
<script src="https://example.com/jquery.min.js"></script>
</head>
<body>
<button id="run">隐藏后弹提示</button>
<p id="box" style="background:#ffe08a;padding:10px;">一段会消失的文字</p>

<script>
$(function () {
    $('#run').click(function () {
        // 效果：段落先 1 秒淡出，随后弹出"动画完成"提示
        $('#box').fadeOut(1000, function () {
            alert('动画完成！段落已隐藏');
        });
    });
});
</script>
</body>
</html>

回调的其他应用

回调不只在效果方法里可用，animate()、slideUp() 等所有带速度参数的方法都支持回调；此外，click() 等事件方法、load() 等 AJAX 方法里的函数参数本质上也都是回调：

$('#box').slideUp(800, function () {
    $(this).remove();       // 收起后把元素从页面删除
});

$('#btn').click(function () {   // 事件回调：点击时执行
    console.log('被点击了');
});

小结

回调函数解决"动画结束后再做什么"的顺序问题：凡是需要在效果播完后执行的代码，都应放进方法的最后一个参数里，而不能直接写在方法后面。下一节学习把多个操作连成一条链的 jQuery 链式调用。

笔记加载中…

标签：#jQuery

返回知识库