如何让父$.when()等待子Promise完成？避免回调地狱

你的核心问题是query1()和query2()没有返回内部的Promise链，导致父级$.when()无法感知内部异步操作的状态，直接进入resolved状态，进而打乱了执行顺序。

修正方案 #

只需要让query1()和query2()返回它们内部的Promise对象即可，这样父级的$.when()会等待子Promise完成后再继续执行后续逻辑：

$.when(query1(a))
.then( function(b) {
   console.log("step 3");
   return query2(b);
})
.then( function(c) {
   console.log("step 6")
});

function query1(a) {
   console.log("step 1");
   // 返回内部的Promise链，让父级能等待异步操作完成
   return $.when(asynchronous_function())
   .then( function(data) {
      console.log("step 2");
      return data;
   });
}

function query2(b) {
   console.log("step 4");
   // 同样返回Promise链
   return $.when(asynchronous_function())
   .then( function(data) {
      console.log("step 5");
      return data;
   });
}

执行顺序说明 #

修正后代码的执行顺序会变成预期的：
step 1 → step 2 → step 3 → step 4 → step 5 → step 6

额外优化 #

如果asynchronous_function()本身已经返回jQuery Deferred对象或者标准Promise，那么可以省略外层的$.when()，直接返回异步函数的结果，代码会更简洁：

function query1(a) {
   console.log("step 1");
   return asynchronous_function()
   .then( function(data) {
      console.log("step 2");
      return data;
   });
}

function query2(b) {
   console.log("step 4");
   return asynchronous_function()
   .then( function(data) {
      console.log("step 5");
      return data;
   });
}

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