使用 jquery deferred 了解顺序异步操作的链接，然后

Question

我一直试图围绕 jquery deferred 和 then 函数。正如我从jQuery then documentation 收集到的，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 小提琴：Sample code。我期待在两个测试中都有类似的行为，但有些事情让我无法理解。我错过了什么？

提前致谢！

编辑：查看更新的DEMO，我正在尝试链接异步操作以在前一个操作完成后开始。

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>

学习经验：在修复错误之前和之后通过 jshint 放置任何 JS 代码。

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');
  });
}

DEMO