异常教程

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

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 开发中，异步操作（如 AJAX 请求、DOM 操作、定时任务）是构建动态交互的核心。然而，当多个异步任务需要按特定顺序执行或等待全部完成时，开发者常面临逻辑混乱和代码嵌套的问题。jQuery.when() 方法正是为了解决这一痛点而设计，它提供了一种优雅的方式来协调多个异步任务，确保代码结构清晰且易于维护。本文将通过循序渐进的讲解、比喻和代码示例，帮助读者掌握这一重要工具。

一、理解异步任务与回调地狱

1.1 什么是异步操作？

异步操作是指程序无需等待任务完成即可继续执行其他代码的操作。例如，使用 $.ajax() 发送网络请求时，浏览器会立即执行后续代码，而非等待响应返回。这种设计提升了程序的响应性，但也带来了挑战：如何管理多个异步任务的执行顺序和结果依赖？

1.2 回调地狱的困境

传统做法是通过嵌套回调函数（callback）来处理任务依赖。例如：

$.ajax({  
  url: "/data1",  
  success: function(response1) {  
    console.log("任务1完成");  
    $.ajax({  
      url: "/data2",  
      success: function(response2) {  
        console.log("任务2完成");  
        // ... 更多嵌套  
      }  
    });  
  }  
});

这种“回调地狱”（Callback Hell）会导致代码可读性差、调试困难，尤其当任务数量增加时问题更明显。

1.3 用比喻理解异步协调

想象一个餐厅点餐场景：你同时点了主菜、饮料和甜点。若服务员必须等主菜上桌后才处理饮料，饮料完成后才处理甜点，整个流程会非常低效。而 jQuery.when() 方法就像一位高效的领班，它能协调所有任务并行执行，最终统一处理结果，避免不必要的等待。

二、jQuery.when() 方法的核心功能

2.1 基础语法与参数类型

jQuery.when() 的核心作用是将多个异步任务封装为一个 Promise 对象，并监听所有任务的完成状态。其基本语法如下：

jQuery.when( deferreds )  
// 参数：一个或多个 Deferred/Promise 对象

支持的参数类型包括：

  • Deferred 对象：如 $.ajax() 返回的对象
  • Promise 对象：如 $.Deferred().promise()
  • 普通值：若参数非异步对象，则直接视为已完成

2.2 返回值与回调函数

调用 jQuery.when() 后，会返回一个新的 Deferred 对象。通过 .then() 或 .done() 方法，可以指定任务全部完成时的回调函数：

jQuery.when(task1, task2).then(function(result1, result2) {  
  // 当 task1 和 task2 均完成时执行  
});

关键特性：

  • 并行执行：所有任务默认同时启动
  • 结果按顺序传递：回调函数的参数按传入 when() 的顺序排列

三、应用场景与代码示例

3.1 场景 1：并行执行多个 AJAX 请求

假设需要同时获取用户信息和订单数据，再合并显示：

const getUser = $.ajax("/api/user");  
const getOrders = $.ajax("/api/orders");  

jQuery.when(getUser, getOrders).done(function(userResponse, ordersResponse) {  
  const user = userResponse[0]; // 注意：AJAX 成功回调返回一个数组  
  const orders = ordersResponse[0];  
  renderProfile(user, orders);  
});

优势：两个请求并行发起，总耗时仅取决于较慢的那个，而非逐个执行。

3.2 场景 2：按顺序执行异步任务

若任务需严格按顺序执行（如先登录再获取数据），可通过链式调用或嵌套 when()：

// 方式一：链式回调  
login().then(function() {  
  return fetchUserData();  
}).then(function(userData) {  
  console.log("登录并获取数据成功");  
});  

// 方式二：使用 jQuery.when()  
jQuery.when(login()).then(fetchUserData).then(renderData);

3.3 场景 3：处理动态参数列表

当需要协调的任务数量不确定时，可结合 apply() 将数组转为参数：

const tasks = [  
  $.ajax("/api/1"),  
  $.ajax("/api/2"),  
  $.Deferred().resolve("静态结果") // 模拟已完成的异步任务  
];  

jQuery.when.apply($, tasks).done(function(...results) {  
  console.log("所有任务完成，结果：", results);  
});

四、进阶技巧与常见问题

4.1 错误处理：用 .fail() 捕获异常

若任何任务失败，when() 的 .fail() 回调将触发：

jQuery.when(task1, task2).done(() => {  
  // 全部成功  
}).fail((err1, err2) => {  
  // 任一任务失败时执行  
  console.error("至少一个任务失败：", err1, err2);  
});

4.2 与原生 Promise 的兼容性

jQuery 3.x 版本支持与原生 Promise 对象的互操作：

const nativePromise = new Promise(...);  
jQuery.when(nativePromise).then(...); // 可无缝衔接

4.3 性能优化建议

  • 避免不必要的同步操作：when() 本身开销极小，但频繁创建大量 Deferred 对象可能影响性能
  • 缓存结果：对重复使用的异步任务（如常驻的 WebSocket 连接），可缓存其结果对象

五、常见问题解答

5.1 问题 1：参数必须是 Deferred 对象吗？

不一定。普通值（如字符串、数字）会被自动包装为已解决的 Deferred 对象。例如：

jQuery.when("Hello", 42).done(function(str, num) {  
  console.log(str, num); // 输出 "Hello 42"  
});

5.2 问题 2：如何获取任务的完成顺序？

when() 的回调参数严格按传入参数的顺序排列。若需追踪每个任务的执行时间，可为每个任务添加时间戳：

const task1 = $.ajax("/slow").then(() => ({ result: "slow", time: Date.now() }));  
const task2 = $.ajax("/fast").then(() => ({ result: "fast", time: Date.now() }));  

jQuery.when(task1, task2).done((slowResult, fastResult) => {  
  console.log("完成顺序：",  
    slowResult.time < fastResult.time ? "slow 先完成" : "fast 先完成"  
  );  
});

结论

jQuery.when() 方法是处理复杂异步逻辑的利器，它通过将多个任务封装为统一的 Promise 对象，解决了回调地狱的问题，同时提供了清晰的链式调用和灵活的参数支持。无论是并行请求、顺序执行，还是动态参数管理，开发者都能通过简洁的代码实现高效协调。

掌握这一工具后，建议通过实际项目（如构建需要多数据源的仪表盘或表单验证系统）进一步巩固理解。随着对异步编程模式的深入，你将能更从容地应对现代 Web 应用中复杂的并发场景。

（全文约 1800 字）

最新发布

查看更多文章