javascript - jQuery 推迟了 : Nesting promises in methods, 最后一次回调太早

Question

我对延期/ promise 有疑问。我有一个主函数，它调用两个必须串行执行的函数。第一个包含一堆必须首先串行执行的异步 Web 服务调用。但实际上我的第二个函数是在第一个函数中的每个异步反馈出现之前调用的。

我构建了一个小示例来显示我的问题:https://fiddle.jshell.net/qLf1c0uq/

以下是引用代码:

function first() {
  $('ul').append("<li>first started</li>");
  let deferred = $.Deferred();
  setTimeout(function() { // Any async function.
    $('ul').append("<li>first ended</li>");
    deferred.resolve();
  }, 2000);
  return deferred.promise();
}

function second(da) {
  $('ul').append("<li>second started</li>");
  let deferred = $.Deferred();
  $('ul').append("<li>second ended</li>");
  deferred.resolve();
  return deferred.promise();
}

function third(da) {
  $('ul').append('<li>third started</li>')
  let deferred = $.Deferred();
  setTimeout(function() {
    $('ul').append("<li>third ended</li>");
    deferred.resolve();
  }, 2000);

  return deferred.promise();
}

function GroupFunction1() {
  let deferred = $.Deferred();
  $('ul').append("<li>Group 1 started</li>");
  var data = "test2";
  $.when(first()).then(function() {
    second(data);
  }).then(function() {
    third("test2");
  }).then(function() {
    $('ul').append("<li>Group 1 ended</li>");
    deferred.resolve();
  });

  return deferred.promise();
}

function GroupFunction2() {
  $('ul').append("<li>Group 2 started</li>");

  $('ul').append("<li>Group 2 ended</li>");
}

$(function() {
  $.when(GroupFunction1()).then(GroupFunction2);
})

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

GroupFunction2 在第三个函数结束之前启动。我本来以为反之亦然。

有人可以帮忙吗？

谢谢!

Answer 1

您需要在回调函数中返回 promise 。这是 promise 链可以等待它们的唯一方式。

此外，您还滥用了显式 promise 创建反模式。

.then() 返回一个 promise 。你可以直接返回。将单个 Promise 传递给 $.when() 是没有意义的，因为所有 $.when() 要做的就是将其吐出:

function first() {
  $('ul').append("<li>first started</li>");
  let deferred = $.Deferred();
  setTimeout(function() { // Any async function.
    $('ul').append("<li>first ended</li>");
    deferred.resolve();
  }, 2000);
  return deferred.promise();
}

function second(da) {
  $('ul').append("<li>second started</li>");
  let deferred = $.Deferred();
  $('ul').append("<li>second ended</li>");
  deferred.resolve();
  return deferred.promise();
}

function third(da) {
  $('ul').append('<li>third started</li>')
  let deferred = $.Deferred();
  setTimeout(function() {
    $('ul').append("<li>third ended</li>");
    deferred.resolve();
  }, 2000);

  return deferred.promise();
}

function GroupFunction1() {
  let deferred = $.Deferred();
  $('ul').append("<li>Group 1 started</li>");
  var data = "test2";

  // v-- here
  return first()      // v-- here
    .then(function() { return second(data); })
    .then(function() { return third("test2"); })
    .then(function() { $('ul').append("<li>Group 1 ended</li>"); });
}

function GroupFunction2() {
  $('ul').append("<li>Group 2 started</li>");

  $('ul').append("<li>Group 2 ended</li>");
}

$(function() {
  GroupFunction1().then(GroupFunction2);
})

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