jQuery deferred.notify() 方法（实战总结）

什么是 jQuery deferred.notify() 方法

在前端开发中，异步操作是绕不开的话题。当我们处理网络请求、文件读取或定时任务时，往往需要等待某个操作完成才能继续下一步。jQuery 的 Deferred 对象为这类场景提供了优雅的解决方案。而 jQuery deferred.notify() 方法，正是其中非常关键的一环。

你可能会问：既然有 resolve() 和 reject()，为什么还需要 notify()？这就像是快递配送中的“实时进度通知”——你不仅关心包裹是否送达（成功/失败），还希望知道它现在在哪个城市、有没有被签收。notify() 就是这个“进度条”机制的核心。

简单来说，jQuery deferred.notify() 方法用于在异步任务进行过程中，向监听者推送中间状态信息。它不会改变 Deferred 的最终状态，但可以实时反馈处理进度。

Deferred 对象的基本工作原理

在深入 notify() 之前，先理解 Deferred 的基础模型。你可以把一个 Deferred 对象想象成一个“承诺”：它承诺将来某个时间会给出结果，但目前还处于等待状态。

// 创建一个 Deferred 实例
const deferred = $.Deferred();

// 模拟一个耗时的异步操作
setTimeout(() => {
  deferred.resolve("任务已完成");
}, 2000);

// 绑定成功回调
deferred.done(function(message) {
  console.log("成功:", message); // 输出：成功: 任务已完成
});

// 绑定失败回调
deferred.fail(function(error) {
  console.log("失败:", error);
});

这段代码展示了 Deferred 的核心机制：

• resolve()：表示任务成功完成
• reject()：表示任务执行失败
• done() 和 fail()：分别监听成功与失败事件

但这些只能在任务结束时触发。如果任务耗时 10 秒，用户却只能在 10 秒后才看到反馈，体验会非常差。这时，notify() 就派上用场了。

用 notify() 实现进度反馈功能

让我们用一个真实的例子来演示 notify() 的价值。假设我们要上传一个大文件，需要实时显示上传进度。

// 创建一个用于文件上传的 Deferred 对象
const uploadDeferred = $.Deferred();

// 模拟文件上传过程（实际中可能是 AJAX 上传）
function simulateFileUpload() {
  const totalChunks = 100;
  let currentChunk = 0;

  // 模拟每 100ms 上传一个分片
  const interval = setInterval(() => {
    currentChunk++;

    // 使用 notify() 发送进度更新
    uploadDeferred.notify(
      Math.round((currentChunk / totalChunks) * 100) // 计算百分比
    );

    // 当所有分片上传完毕
    if (currentChunk >= totalChunks) {
      clearInterval(interval);
      uploadDeferred.resolve("上传完成");
    }
  }, 100);
}

// 启动上传模拟
simulateFileUpload();

// 监听进度通知
uploadDeferred.progress(function(progress) {
  console.log("上传进度:", progress, "%");
  // 这里可以更新页面上的进度条
  // 例如：$("#progress-bar").width(progress + "%");
});

// 监听最终结果
uploadDeferred.done(function(message) {
  console.log("最终结果:", message);
});

uploadDeferred.fail(function(error) {
  console.error("上传失败:", error);
});

这段代码中：

• notify() 被调用 100 次，每次传递当前进度百分比
• progress() 回调函数会实时响应这些通知
• 用户在上传过程中就能看到进度条变化，而不是傻等

这个例子完美体现了 notify() 的价值：它让异步操作从“黑箱”变成了“透明过程”。

多次调用 notify() 的实际场景

notify() 允许多次调用，且每次调用都会触发所有绑定的 progress 回调。这在复杂流程中非常有用。

比如，在一个数据导出任务中，可能包括多个步骤：

1. 数据查询
2. 数据格式化
3. 文件压缩
4. 上传服务器

const exportTask = $.Deferred();

// 模拟多阶段任务
function performExport() {
  // 阶段 1：查询数据
  setTimeout(() => {
    exportTask.notify("正在查询数据...");
  }, 500);

  // 阶段 2：格式化数据
  setTimeout(() => {
    exportTask.notify("正在格式化数据...");
  }, 1200);

  // 阶段 3：压缩文件
  setTimeout(() => {
    exportTask.notify("正在压缩文件...");
  }, 1800);

  // 阶段 4：完成
  setTimeout(() => {
    exportTask.resolve("导出成功");
  }, 2500);
}

// 启动导出任务
performExport();

// 绑定进度回调，接收所有阶段通知
exportTask.progress(function(message) {
  console.log("当前状态:", message);
  // 可以更新 UI 显示当前步骤
});

// 绑定最终结果
exportTask.done(function(result) {
  console.log("任务完成:", result);
});

输出结果：

当前状态: 正在查询数据...
当前状态: 正在格式化数据...
当前状态: 正在压缩文件...
任务完成: 导出成功

这种模式特别适合需要分步反馈的复杂任务，让前端开发者能清晰地控制流程展示。

notify() 与 resolve/reject 的区别

很多人容易混淆 notify() 与 resolve() 的区别。我们来用表格对比一下：

关键区别在于：notify() 不会结束任务，它只是“报告进展”；而 resolve() 和 reject() 才是任务的“终点”。

举个生活中的例子：

• notify() 就像你告诉朋友“我已经走到一半了”
• resolve() 就像你告诉他“我到家了，任务完成”
• reject() 就像你告诉他“我迷路了，任务失败”

你不能因为说了一次“我到一半了”就认为任务结束了，这正是 notify() 的设计哲学。

实际项目中的最佳实践

在真实项目中使用 notify() 时，有几点建议：

1. 不要滥用通知频率
   频繁调用 notify() 会带来性能开销。建议在有意义的阶段调用，比如每完成 10% 的任务。

2. 传递结构化数据
   不要只传数字百分比，可以传对象：

   uploadDeferred.notify({
     progress: 75,
     speed: "1.2 MB/s",
     remaining: "12s"
   });
   

3. 确保回调函数健壮
   因为 notify() 可能被多次调用，确保你的回调函数能处理重复调用，避免 UI 闪动。

4. 结合 Promise.all() 使用
   在多个异步任务中，可以用 notify() 统一反馈进度：

   const tasks = [task1, task2, task3];
   const progress = $.Deferred();
   
   $.when(...tasks).done(function() {
     progress.resolve("全部完成");
   }).fail(function() {
     progress.reject("部分失败");
   });
   
   // 监听每个任务的进度
   task1.progress(progress.notify);
   task2.progress(progress.notify);
   task3.progress(progress.notify);
   

总结

jQuery deferred.notify() 方法虽然不像 resolve() 那样“决定性”，但它在提升用户体验方面有着不可替代的作用。它让异步操作从“不可知”变为“可感知”，从“等待”变为“掌控”。

无论是文件上传、数据导出还是复杂流程，只要涉及耗时操作，就应该考虑加入 notify() 机制。它不改变任务结果，却让整个过程更加透明、可控。

记住：一个好的异步处理机制，不仅要看“结果”，更要看“过程”。jQuery deferred.notify() 方法正是实现这一目标的利器。在现代前端开发中，它依然是值得掌握的实用技能。