如何检测所有异步调用完成后触发函数？解决jQuery.when()复用失效问题

这个问题我之前也踩过坑！核心原因很简单：jQuery的Deferred对象是“一次性”的——一旦它的状态变成resolved（完成）或者rejected（失败），就彻底固定了，后续再调用resolve()或reject()都不会改变它的状态。第一次选择主题时，你的三个查询完成后对应的Deferred已经处于完成状态，当用户选择新主题时，你如果还复用这几个旧的Deferred，$.when()会直接触发之前的done回调，完全不会等待新的异步操作完成。

正确的解决思路：每次选择都创建新的Deferred/Promise #

不需要“重置”旧的Deferred（也没法重置），而是每次用户选择新主题时，都生成全新的Deferred对象（或者直接用异步操作返回的Promise）。

场景1：用AJAX请求（推荐，因为jqXHR本身就是Promise兼容的）

如果你的三个查询是AJAX请求，根本不需要手动创建Deferred——$.get()、$.post()这些方法返回的jqXHR对象本身就实现了Deferred接口，直接把它们传给$.when()就行，每次新选择时发起新的AJAX请求，拿到新的jqXHR：

$('#theme-select').on('change', function() {
  const selectedTheme = $(this).val();

  // 每次选择都发起新的AJAX请求，得到全新的jqXHR（Promise）
  const query1 = $.get('/api/first-query', { theme: selectedTheme });
  const query2 = $.get('/api/second-query', { theme: selectedTheme });
  const query3 = $.get('/api/third-query', { theme: selectedTheme });

  // 用新的Promise调用$.when()
  $.when(query1, query2, query3)
    .done(function(res1, res2, res3) {
      // 这里拿到三个新查询的结果，res1[0]是query1的返回数据，以此类推
      console.log('合并结果：', res1[0], res2[0], res3[0]);
      // 调用你的合并处理函数
      handleMergedResults(res1[0], res2[0], res3[0]);
    })
    .fail(function(error) {
      // 处理任意一个查询失败的情况
      console.error('查询出错：', error);
    });
});

场景2：手动管理异步操作（非AJAX）

如果你的查询不是AJAX，而是其他异步操作（比如定时器、自定义异步任务），那每次选择时都要创建全新的Deferred实例：

$('#theme-select').on('change', function() {
  // 每次选择都创建新的Deferred对象
  const def1 = $.Deferred();
  const def2 = $.Deferred();
  const def3 = $.Deferred();

  // 监听三个Deferred都完成的回调
  $.when(def1, def2, def3).done(function(res1, res2, res3) {
    console.log('合并结果：', res1, res2, res3);
    handleMergedResults(res1, res2, res3);
  });

  // 模拟第一个异步查询
  setTimeout(() => {
    // 执行你的查询逻辑，拿到结果后resolve新的Deferred
    const result1 = `查询1结果（主题：${$(this).val()}）`;
    def1.resolve(result1);
  }, 1000);

  // 模拟第二个异步查询
  setTimeout(() => {
    const result2 = `查询2结果（主题：${$(this).val()}）`;
    def2.resolve(result2);
  }, 1500);

  // 模拟第三个异步查询
  setTimeout(() => {
    const result3 = `查询3结果（主题：${$(this).val()}）`;
    def3.resolve(result3);
  }, 2000);
});

额外优化：封装查询逻辑 #

如果查询逻辑重复，可以把它封装成函数，每次调用返回新的Promise/Deferred，让代码更整洁：

// 封装查询函数，每次调用返回新的Promise
function fetchQuery(theme, apiUrl) {
  return $.get(apiUrl, { theme: theme });
  // 非AJAX场景的封装：
  // return new $.Deferred((def) => {
  //   // 执行异步逻辑，完成后def.resolve(result)
  // }).promise();
}

// 下拉框变更事件
$('#theme-select').on('change', function() {
  const theme = $(this).val();
  const query1 = fetchQuery(theme, '/api/query1');
  const query2 = fetchQuery(theme, '/api/query2');
  const query3 = fetchQuery(theme, '/api/query3');

  $.when(query1, query2, query3).done(handleMergedResults);
});

总结一下：Deferred对象的状态不可逆，所以不要复用它们——每次用户触发新的查询流程时，都生成全新的Deferred或Promise，这样$.when()才能正确等待所有新的异步操作完成后再触发回调。

内容的提问来源于stack exchange，提问作者Vern