jQuery deferred.notify() 方法（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：异步编程的挑战与解决方案

在现代 Web 开发中，异步编程是绕不开的课题。无论是数据请求、文件上传，还是复杂的计算任务，开发者都需要处理可能阻塞主线程的操作。jQuery 的 Deferred 对象体系，为开发者提供了一种优雅的解决方案。而其中的 deferred.notify() 方法，更是为异步任务的进度追踪提供了关键支持。本文将通过循序渐进的方式，结合实际案例，深入解析这一方法的功能与应用场景。

一、Deferred 对象：异步任务的指挥系统

要理解 deferred.notify()，首先需要掌握 jQuery 的 Deferred 对象基础。

1.1 什么是 Deferred 对象？

Deferred 对象可以被视为一个异步任务的管理者。它如同交通指挥系统，通过预定义的回调函数（如 done()、fail()、progress()）协调任务的执行流程。其核心功能包括：

• 状态管理：跟踪任务的 pending（进行中）、resolved（成功）或 rejected（失败）状态。
• 回调注册：允许开发者预先注册成功、失败或进度更新的处理逻辑。

类比说明：交通指挥系统

想象一个繁忙的十字路口，Deferred 对象就像交通信号灯控制器：

• resolve() 相当于绿灯，表示任务完成。
• reject() 是红灯，表示任务失败。
• notify() 则是黄灯闪烁，向观察者传递当前任务的进度信息。

1.2 Deferred 的核心方法与关系图

关系图说明：

• resolve/reject 触发 done/fail 回调，而 notify 触发 progress 回调。
• 这种设计实现了异步任务的状态解耦，开发者无需在代码中频繁检查状态，只需关注事件本身。

二、deferred.notify() 方法：进度追踪的桥梁

2.1 方法定义与核心作用

deferred.notify( arguments ) 是 Deferred 对象的一个方法，用于主动通知观察者任务的当前进度。其参数可传递任意数据（如百分比、阶段描述等），并通过 progress 回调传递给注册的监听函数。

语法示例：

deferred.notify(progressPercentage);

2.2 与 Promise 的对比

在原生 JavaScript 的 Promise 中，then() 方法仅能处理成功或失败状态，而 Deferred 的 progress 机制填补了这一空白。它允许开发者在任务执行过程中持续传递状态信息，例如：

• 文件上传的实时进度条
• 网络请求的分块处理状态
• 多步骤任务的阶段完成提示

比喻说明：快递运输中的实时追踪

假设 Deferred 对象是快递公司，notify() 就像快递员发送的物流信息更新：

• 当包裹到达分拣中心时，系统调用 deferred.notify("已到达上海分拨中心")。
• 当包裹开始派送时，deferred.notify("预计1小时后送达")。
• 最终通过 resolve() 表示包裹已签收。

三、实战案例：模拟文件下载进度

3.1 场景描述

假设我们需要实现一个文件下载进度追踪功能，要求：

1. 模拟文件下载的异步过程。
2. 实时显示下载百分比。
3. 在下载完成后执行清理操作。

3.2 实现步骤与代码解析

步骤 1：创建 Deferred 对象

const downloadPromise = $.Deferred();

步骤 2：模拟异步任务（下载过程）

使用 setTimeout 模拟 5 秒的下载时间，并在每秒更新进度：

function startDownload() {
  let progress = 0;
  const interval = setInterval(() => {
    if (progress >= 100) {
      clearInterval(interval);
      downloadPromise.resolve("下载完成"); // 标记任务成功
    } else {
      progress += 20; // 每次增加20%
      downloadPromise.notify(progress); // 通知进度
    }
  }, 1000);
}

步骤 3：注册回调函数

通过 done、fail、progress 方法绑定事件处理器：

downloadPromise
  .progress((percent) => {
    console.log(`当前进度：${percent}%`);
    // 更新 UI 进度条
  })
  .done((message) => {
    console.log(message);
    alert("文件已下载！");
  })
  .fail((error) => {
    console.error("下载失败：", error);
  });

// 启动下载
startDownload();

运行结果

控制台将每秒输出进度信息，最终显示“下载完成”，并弹出成功提示框。此案例完整体现了 notify() 在实时状态反馈中的作用。

四、高级技巧与常见问题解答

4.1 如何传递多个进度参数？

notify() 支持传递多个参数，接收方可通过回调函数的参数列表获取：

// 通知时传递多个参数
deferred.notify(50, "正在处理第二阶段");

// 接收参数
deferred.progress((percent, stage) => {
  console.log(`进度：${percent}%，当前阶段：${stage}`);
});

4.2 如何在链式调用中处理进度？

通过 pipe() 或 then() 方法，可以将进度事件与其他操作组合：

downloadPromise
  .progress(updateUI)
  .then(
    (result) => console.log("成功", result),
    (error) => console.log("失败", error),
    (progress) => console.log("链式进度", progress) // 第三个参数接收进度
  );

4.3 常见误区：notify() 不触发的可能原因

• 未正确绑定 progress 回调：需确保在 deferred.progress() 或 then() 的第三个参数中注册监听。
• Deferred 对象状态已改变：如果任务已 resolve 或 reject，后续 notify() 将被忽略。

五、应用场景与最佳实践

5.1 典型使用场景

• 文件上传/下载：实时显示进度条。
• 多步骤任务：例如表单验证、数据分批处理。
• 长轮询/ WebSocket：通知服务器端的实时状态。

5.2 代码优化建议

• 封装进度逻辑：将 notify() 的调用封装在工具函数中，避免重复代码。
• 防抖与节流：对高频进度更新进行优化，避免过度触发回调。
• 错误处理结合：在 fail 回调中结合进度信息，提供更清晰的错误描述。

六、与原生 Promise 的兼容性

尽管 jQuery 的 Deferred 对象与 ES6 Promise 存在差异，但可以通过 deferred.promise() 将其转换为标准 Promise 对象：

const nativePromise = downloadPromise.promise();
nativePromise.then(
  () => console.log("成功"),
  () => console.log("失败"),
  (progress) => console.log("进度", progress) // 需 Promise 的原生支持
);

需要注意的是，原生 Promise 的 onProgress 支持在部分浏览器中可能受限，而 jQuery 的实现提供了更好的兼容性。

结论：掌握 notify() 的价值与未来方向

通过 jQuery deferred.notify() 方法，开发者能够轻松实现异步任务的动态进度追踪，提升用户体验并增强代码的可维护性。随着现代前端框架（如 React、Vue）对异步编程的深入优化，理解 Deferred 体系仍能为开发者提供底层原理视角，帮助其更好地适配各类异步场景。

在未来的开发中，建议结合现代工具（如 async/await 与自定义 Hook）进一步简化进度管理逻辑，但 deferred.notify() 作为经典方案，仍将在许多项目中发挥重要作用。

希望本文能帮助您系统掌握这一方法，为构建更健壮的异步应用奠定基础。