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），您的代码才有效。检查下面。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

正如我在这里看到的那样，您正在调用startTest0函数返回其promise对象并调用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

理解使用jquery延迟的顺序异步操作的链接然后

2 个答案: