理解使用jquery递延的顺序异步操作链

Question

我一直在尝试围绕jquery deferred和then函数来包装我的头。正如我从jQuery文档中收集到的，then函数将回调的返回值发送到下一个then处理程序，如果它们是这样链接的。既然如此，为什么我的代码不能像预期的那样工作?

function log(message) {
  var d = new Date();
  $('#output').append('<div>' + d.getSeconds() + '.' + d.getMilliseconds() + ': ' + message + '</div>');
}
function asyncWait(millis) {
  var dfd = $.Deferred();
  setTimeout(function () {
    var d = new Date();
    log('done waiting for ' + millis + 'ms');
    dfd.resolve(millis);
  }, millis);
  return dfd.promise();
}
function startTest0() {
  return asyncWait(1000).then(asyncWait).then(asyncWait).then(asyncWait).done(function () {
    log('all done, 4 times');
  });
}
function startTest() {
  asyncWait(500).then(function () {
    return asyncwait(1000);
  }).then(function () {
    return asyncWait(1500);
  }).then(function () {
    return asyncWait(2000);
  }).done(function () {
    log('all done');
  });
}
log('welcome');
log('starting test ...');
startTest0().done(function() { log('starting the second test'); startTest(); });

JS在这里:示例代码。我期望在两个测试中都有类似的行为，但有些事情让我困惑。我错过了什么?

提前感谢!

编辑:看到一个更新的演示，我试图链接异步操作开始后，前一个完成。

Answer 1

除了一个错别字(asyncwait而不是asyncWait)，您的代码工作正常。检查下面。

function log(message) {
  var d = new Date();
  $('#output').append('<div>' + d.getSeconds() + '.' + d.getMilliseconds() + ': ' + message + '</div>');
}
function asyncWait(millis) {
  var dfd = $.Deferred();
  setTimeout(function () {
    var d = new Date();
    log('done waiting for ' + millis + 'ms');
    dfd.resolve(millis);
  }, millis);
  return dfd.promise();
}
function startTest0() {
  return asyncWait(1000).then(asyncWait).then(asyncWait).then(asyncWait).done(function () {
    log('all done, 4 times');
  });
}
function startTest() {
  asyncWait(500).then(function () {
    return asyncWait(1000);
  }).then(function () {
    return asyncWait(1500);
  }).then(function () {
    return asyncWait(2000);
  }).done(function () {
    log('all done');
  });
}
log('welcome');
log('starting test ...');
startTest0().done(function() { log('starting the second test'); startTest(); });

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

Answer 2

正如我在这里看到的，您正在调用startTest0函数返回其承诺对象并调用then回调，而不返回新的times进入下一个回调。我把你的startTest()修改成这样:

function startTest() {
  return asyncWait(500).then(function () {
    asyncWait(1000);
    return 1500; // here we pass to the next then
  }).then(function (ms) { // ms here we got 1500       
    asyncWait(ms);
    return 2000; // here we pass to the next then
  }).then(function (ms) { // ms here we got 2000       
    asyncWait(ms)
    return asyncWait(2500);
  }).done(function () {
    log('all done');
  });
}