jQuery deferred.notifyWith() 方法（千字长文）

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

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

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

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

前言

在前端开发中，异步操作的管理一直是一个核心挑战。无论是网络请求、文件读取还是复杂的计算任务，开发者都需要一种高效的方式控制和监控这些操作的执行状态。jQuery deferred.notifyWith() 方法正是为了解决这一需求而设计的工具之一。它允许开发者在异步任务执行过程中，向外部“报告进度”，从而实现更灵活的状态管理。本文将从基础概念入手，通过代码示例和实际案例，深入浅出地解析这一方法的原理与用法，帮助开发者在项目中更好地应用它。

Deferred 对象：异步操作的“指挥中心”

要理解 deferred.notifyWith()，首先需要了解 Deferred 对象。它是 jQuery 中用于管理异步操作的核心机制，类似于 Promise 对象，但功能更灵活。可以将其想象为一个“任务协调者”，负责跟踪任务的开始、执行、完成或失败。

Deferred 的核心方法与状态

Deferred 对象有三个核心状态：

1. pending（未完成）：任务尚未完成或失败。
2. resolved（已解决）：任务成功完成。
3. rejected（已拒绝）：任务因错误终止。

对应的，有以下关键方法：

• resolve()：标记任务成功完成。
• reject()：标记任务失败。
• notify()：在任务执行过程中发送进度通知（即 deferred.notifyWith() 的基础功能）。

为什么需要 notifyWith？

在异步任务执行过程中，开发者可能希望实时获取任务的“进度信息”。例如：

• 文件上传时显示实时进度条。
• 长时间计算任务中更新中间结果。
• 网络请求时显示“正在加载第 N 步”。

deferred.notifyWith() 正是为这类场景设计的，它允许任务在执行过程中主动触发进度事件，让外部代码能够监听并响应这些事件。

notifyWith 方法详解

方法语法与参数

deferred.notifyWith() 的基本语法如下：

deferred.notifyWith( context, [ arguments ] );  

• context（可选）：指定 notify 回调函数中 this 的指向。
• arguments（可选）：传递给 notify 回调函数的参数列表。

与 notify 的区别

deferred.notify() 是 deferred.notifyWith() 的简化版本，默认将 this 指向 deferred 对象本身，并且参数列表需要通过额外的参数传递。而 notifyWith() 则允许更灵活地控制 this 和参数的传递。

进度通知的“双向通信”

可以将 deferred.notifyWith() 视为一个“消息发射器”。例如，假设有一个下载任务：

1. 任务内部通过 deferred.notifyWith() 发送当前下载进度（如 50%）。
2. 外部代码通过 deferred.progress() 监听这些进度消息，并更新 UI。

这种设计实现了异步任务与外部逻辑的解耦，符合“观察者模式”的思想。

核心概念：Deferred 的回调链

为了更好地理解 deferred.notifyWith() 的应用场景，需要熟悉 Deferred 对象的回调链机制：

deferred  
  .progress( onProgress )    // 监听进度事件  
  .done( onSuccess )         // 成功时的回调  
  .fail( onError );          // 失败时的回调  

• progress()：绑定进度回调函数。
• done()：绑定成功回调函数。
• fail()：绑定失败回调函数。

当 deferred.notifyWith() 被调用时，所有绑定到 progress() 的回调函数将被触发，参数由 notifyWith() 提供。

实战案例：模拟文件上传进度

场景描述

假设需要开发一个文件上传功能，用户选择文件后，前端需要实时显示上传进度。由于上传可能需要较长时间，使用 deferred.notifyWith() 可以实现这一目标。

实现步骤

1. 创建 Deferred 对象：

   const deferred = $.Deferred();  
   

2. 模拟上传过程：

   function uploadFile(file) {  
     // 每隔 500 毫秒发送一次进度通知  
     let progress = 0;  
     const timer = setInterval(() => {  
       if (progress >= 100) {  
         clearInterval(timer);  
         deferred.resolve(); // 标记任务成功  
       } else {  
         progress += 20;  
         deferred.notifyWith(null, [progress]); // 发送进度  
       }  
     }, 500);  
   }  
   

3. 监听进度与结果：

   deferred  
     .progress((currentProgress) => {  
       console.log(`当前进度：${currentProgress}%`);  
       // 更新页面中的进度条  
     })  
     .done(() => {  
       console.log("文件上传成功！");  
     });  
   

运行结果

执行 uploadFile() 后，控制台会每 500 毫秒输出一次进度信息，最终显示成功信息。此案例展示了 deferred.notifyWith() 如何将任务内部的进度数据传递给外部监听器。

进阶技巧与常见问题

技巧 1：传递复杂数据

deferred.notifyWith() 支持传递任意参数，例如对象或数组，从而实现更丰富的信息传递：

// 任务内部发送多参数通知  
deferred.notifyWith(null, [percent, remainingTime]);  

// 监听时解构参数  
deferred.progress((percent, time) => {  
  console.log(`进度：${percent}%，剩余时间：${time}秒`);  
});  

技巧 2：结合 jQuery 的 AJAX 请求

在 AJAX 请求中，可以通过 jqXHR 对象（它继承自 Deferred）直接使用 notify() 或 notifyWith()：

$.ajax({  
  url: "/api/upload",  
  method: "POST",  
  xhr: function() {  
    const xhr = $.ajaxSettings.xhr();  
    if (xhr.upload) {  
      xhr.upload.addEventListener("progress", function(event) {  
        if (event.lengthComputable) {  
          const percent = (event.loaded / event.total) * 100;  
          $(xhr).notify(percent); // 通过 xhr 对象触发进度通知  
        }  
      });  
    }  
    return xhr;  
  }  
})  
.progress(function(percent) {  
  console.log(`AJAX 上传进度：${percent}%`);  
});  

常见问题：为什么 notify 没有触发？

• 未绑定 progress 回调：确保调用了 deferred.progress() 并传入回调函数。
• 任务已结束：如果任务已通过 resolve() 或 reject() 完成，后续的 notify() 将不会触发。
• 参数传递错误：检查 notifyWith() 的参数是否正确传递给回调函数。

与原生 Promise 的对比

尽管现代 JavaScript 推荐使用原生的 Promise 对象，但 jQuery 的 Deferred 仍有一些独特优势：
| 特性 | jQuery Deferred | 原生 Promise |
|------------------------|---------------------------|--------------------------|
| 进度通知 | 支持 notify() | 不支持（需自行实现） |
| 灵活的 this 绑定 | 通过 notifyWith() 控制 | 依赖 bind() 或箭头函数 |
| 兼容性 | 支持旧版浏览器（需 jQuery）| 需 polyfill 或转译工具 |

因此，在需要兼容旧项目或需要进度监控的场景中，jQuery 的 Deferred 仍是有力工具。

结论

通过本文的讲解，我们深入理解了 jQuery deferred.notifyWith() 方法的核心作用：在异步任务执行过程中，向外部提供实时状态更新。无论是文件上传、网络请求还是复杂计算，这一方法都能帮助开发者构建更流畅、更直观的用户体验。

掌握 deferred.notifyWith() 的关键是：

1. 熟悉 Deferred 对象的生命周期与回调机制。
2. 在任务内部合理调用 notifyWith() 发送数据。
3. 通过 progress() 监听并响应进度事件。

希望读者能将这一知识应用到实际项目中，进一步优化异步操作的管理与监控。