javascript - jQuery promise，如何检查 then() 是否真的在 when() 之后？

Question

这可能只是我惨痛的教训，但我只是想和大家确认一下。

function a() {
  var dtd = $.Deferred(); 
  console.log('a');
  setTimeout(() => {
    dtd.resolve(); 
  }, 5000);
  return dtd.promise(); 
}  
function b() {
  var dtd = $.Deferred(); 
  console.log('b');
  setTimeout(() => {
    dtd.resolve(); 
  }, 5000);
  return dtd.promise(); 
}    

$.when(a()).then(b()).done(function () {console.log('c');});

只有 c 在延迟后打印，a 和 b 不是。 JSFiddle .

是这样的吗？谢谢。

Answer 1

$.when() 的参数应该是一个 Promise - 你做对了，因为 a() 返回一个 Promise。

但是 .then() 实际上接受一个函数作为参数。也就是说，您应该传递 b，而不是 b() 的结果。

表达式 .then(b()) 执行 b() 马上，所以它不会等 5 秒直到 a() 的 promise 已解决。当你有 .then(b) 时，调用 b() 只会在 a() 的 promise 被 resolved 之后发生，这是你想要什么。

因此只需将 .then(b()) 更改为 .then(b) 即可按预期运行(打印 a，等待5s，打印b，再等5s，打印c):

function a() {
  var dtd = $.Deferred(); 
  console.log('a');
  setTimeout(() => {
    dtd.resolve(); 
  }, 5000);
  return dtd.promise(); 
}  
function b() {
  var dtd = $.Deferred(); 
  console.log('b');
  setTimeout(() => {
    dtd.resolve(); 
  }, 5000);
  return dtd.promise(); 
}    
$.when(a()).then(b).done(function () {console.log('c');});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>