javascript - 等待unitl ajax及其回调函数完成

Question

我正在构建一个允许用户同时执行多个操作的 Web 应用程序。例如，用户可以打开列表、删除列表或添加新列表。

每个动作都会进行一次 ajax 调用并执行回调函数以在成功时更新 UI。我想确保这些操作以序列化的方式执行，这样 UI 就不会不同步。例如，如果用户打开一个列表，但在几分之一秒后删除了该列表，这取决于哪个 ajax 调用首先完成，它可能会显示应该现在删除的列表。

为此，对于每个操作，我想等到 ajax 调用及其回调函数完成。我怎样才能做到这一点？

Answer 1

使用 Jquery，您可以添加async: false到您的 Ajax 调用或使用Jquery deferred以确保仅在 Ajax 调用完成后发出操作（假设您使用 Jquery）。

如果您有多个 Ajax 请求，示例可能如下所示：

$.ajax({url: url}).pipe(function() {
  // some ajax stuff
  return $.ajax({});
}).pipe(function() {
  // some more ajax stuff (3rd request)
  return $.ajax({});
}).done(function() {
  // done with all ajax requests...
});

Answer 2

如果您使用的是 jQuery，则在/.always()之后调用回调。.done().fail()

$.ajax("example.php")
    .done(function() {
        alert("success");
    })
    .fail(function() {
        alert("error");
    })
    .always(function() {
        alert("complete"); //Called after done/fail callbacks
    });