jQuery deferred.done() 方法（快速上手）

jQuery deferred.done() 方法详解：异步编程的“任务完成”信号灯

在前端开发中，我们经常需要处理异步操作，比如发送 AJAX 请求、加载图片、等待用户输入等。这些操作不会立即返回结果，而是需要等待一段时间。如何优雅地处理这些“延迟响应”的任务，是每个开发者都要面对的问题。

jQuery 提供了一套强大的异步处理机制，其中 deferred.done() 方法就是核心工具之一。它就像是一个“任务完成”的信号灯——当某个异步任务成功执行后，它会亮起绿灯，通知你“任务已完成”。

本文将带你一步步理解 deferred.done() 方法的原理、用法和实际应用场景，帮助你掌握现代 jQuery 异步编程的精髓。

什么是 deferred 对象？

在深入 done() 方法之前，先搞清楚 deferred 是什么。

deferred 是 jQuery 中用于管理异步操作的对象。你可以把它想象成一个“任务调度器”：你把一个异步任务交给它，它会负责监控任务的执行状态（如 pending、resolved、rejected），并允许你在合适时机执行回调函数。

// 创建一个 deferred 对象
var deferred = $.Deferred();

// 模拟异步操作：1秒后执行成功
setTimeout(function () {
    deferred.resolve("任务成功完成！");
}, 1000);

// 这里不会立刻执行，因为异步操作还未完成
console.log("任务已提交，等待结果...");

在这个例子中，$.Deferred() 创建了一个空的 deferred 对象。我们通过 setTimeout 模拟了一个异步操作，1 秒后调用 resolve() 方法表示任务成功完成。

deferred.done() 方法的核心作用

deferred.done() 方法的作用是：当 deferred 对象被 resolve（成功）时，自动执行你指定的回调函数。

换句话说，它是一个“成功回调监听器”。只要任务成功，无论多久，它都会触发。

var deferred = $.Deferred();

// 1秒后成功完成任务
setTimeout(function () {
    deferred.resolve("数据已加载完成！");
}, 1000);

// 使用 done() 监听任务成功
deferred.done(function (message) {
    console.log("✅ 任务完成！消息：", message);
    // 输出：✅ 任务完成！消息： 数据已加载完成！
});

重要提示：

• done() 只在 resolve() 被调用时触发。
• 如果 reject() 被调用，done() 不会执行。
• done() 回调函数接收 resolve() 传入的参数。

多个回调函数的注册与执行顺序

deferred.done() 支持注册多个回调函数，它们会按照注册顺序依次执行。

var deferred = $.Deferred();

setTimeout(function () {
    deferred.resolve("Hello, World!");
}, 1500);

// 注册多个 done 回调
deferred.done(function (msg) {
    console.log("1. 第一个回调收到：", msg);
    // 输出：1. 第一个回调收到： Hello, World!
});

deferred.done(function (msg) {
    console.log("2. 第二个回调收到：", msg);
    // 输出：2. 第二个回调收到： Hello, World!
});

deferred.done(function (msg) {
    console.log("3. 第三个回调收到：", msg);
    // 输出：3. 第三个回调收到： Hello, World!
});

这个特性非常有用，比如你在开发中需要在数据加载成功后：

• 更新页面 DOM
• 触发动画
• 发送埋点日志

这些操作可以分别注册到 done() 中，保持代码职责清晰。

与 AJAX 请求结合的实际案例

deferred.done() 最常见的用途是在 AJAX 请求成功后执行处理逻辑。

// 发送 GET 请求获取用户数据
var request = $.ajax({
    url: "/api/user",
    method: "GET",
    dataType: "json"
});

// 使用 done() 处理成功响应
request.done(function (data) {
    console.log("👤 用户数据获取成功：", data);
    
    // 更新页面显示
    $("#username").text(data.name);
    $("#email").text(data.email);
    
    // 显示成功提示
    alert("用户信息加载成功！");
});

// 可选：使用 fail() 处理失败情况
request.fail(function (xhr, status, error) {
    console.error("❌ 请求失败：", error);
    alert("加载用户信息失败，请稍后重试！");
});

在这个案例中：

• $.ajax() 返回一个 deferred 对象。
• done() 在请求成功时自动执行。
• fail() 用于处理网络错误或服务器返回错误。

这种写法比传统的回调嵌套（“回调地狱”）清晰得多，也更易于维护。

与其他方法的协同使用：when() 与 all()

当你需要等待多个异步任务都完成时，可以使用 $.when() 配合 done()。

// 模拟两个异步任务
var task1 = $.Deferred();
var task2 = $.Deferred();

// 1秒后完成第一个任务
setTimeout(function () {
    task1.resolve("任务1完成");
}, 1000);

// 2秒后完成第二个任务
setTimeout(function () {
    task2.resolve("任务2完成");
}, 2000);

// 等待两个任务都完成
$.when(task1, task2).done(function (result1, result2) {
    console.log("✅ 所有任务完成！");
    console.log("任务1结果：", result1);
    console.log("任务2结果：", result2);
    // 输出：
    // ✅ 所有任务完成！
    // 任务1结果： 任务1完成
    // 任务2结果： 任务2完成
});

$.when() 会等待所有传入的 deferred 对象都 resolve 后，才执行 done() 回调。这在需要同时加载多个资源（如图片、配置、用户权限）时非常有用。

优雅处理错误：done() 与 fail() 的配合

deferred.done() 仅处理成功情况。如果任务失败（调用了 reject()），你需要使用 fail() 来捕获错误。

var deferred = $.Deferred();

// 模拟失败场景
setTimeout(function () {
    deferred.reject("网络超时，请重试");
}, 1000);

// 成功回调（不会执行）
deferred.done(function (msg) {
    console.log("成功：", msg);
});

// 失败回调（会执行）
deferred.fail(function (error) {
    console.log("❌ 错误：", error);
    // 输出：❌ 错误： 网络超时，请重试
});

建议在使用 done() 时，始终搭配 fail()，这样能避免“任务失败但无任何提示”的尴尬情况。

高级技巧：链式调用与返回新 deferred

done() 方法本身也返回一个 deferred 对象，支持链式调用。

var deferred = $.Deferred();

setTimeout(function () {
    deferred.resolve("原始数据");
}, 1000);

// 链式调用：done → done
deferred.done(function (data) {
    console.log("第1步：", data);
    return data.toUpperCase(); // 返回处理后的数据
})
.done(function (processedData) {
    console.log("第2步：", processedData);
    // 输出：
    // 第1步： 原始数据
    // 第2步： 原始数据
});

注意：done() 的返回值会被作为下一个 done() 的参数。这使得你可以构建“数据处理流水线”。

常见误区与最佳实践

总结：掌握 jQuery deferred.done() 方法的关键

jQuery deferred.done() 方法是处理异步操作成功回调的核心工具。它让你摆脱嵌套回调的困扰，用清晰、可维护的方式组织异步流程。

通过本文的学习，你应该已经掌握了：

• deferred 对象的基本概念
• done() 如何监听成功事件
• 多个回调的执行顺序
• 与 AJAX、when() 的结合使用
• 错误处理的完整流程

在实际项目中，合理使用 done() 能让你的代码更清晰、更健壮。尤其在处理多任务并行、数据加载、用户交互等场景时，它将成为你不可或缺的助手。

记住：异步编程的本质，是“事件驱动”而非“顺序执行”。 而 deferred.done() 方法，正是你理解这一思想的关键入口。