使用 jquery deferred and then 了解顺序异步操作的链接

Question

我一直在努力思考 jquery deferred 和 then 函数。正如我从 jQuery then documentation 收集到的，then 函数将回调的 return 值发送到下一个 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 Fiddle 这里：Sample code。我期待在这两个测试中有类似的行为，但有些事情让我难以理解。我错过了什么？

提前致谢！

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

Answer 1

正如我在这里看到的，您正在调用 startTest0 函数返回它的 promise 对象并调用 then 回调而不返回新的 times 到 next then 回调。我把你的 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

Answer 2

除了一个拼写错误（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>

要学习的课程：在修复错误之前和之后将任何 JS 代码通过 jshint。

使用 jquery deferred and then 了解顺序异步操作的链接

Understanding chaining of sequential asynchronous operations using jquery deferred and then

javascript

jquery

jquery-deferred