javascript - 多个 AJAX 成功顺序

Question

我正在使用 AJAX 加载一组数据 block 。这些 block 中的每一个都需要按顺序在 DOM 中呈现，因此我请求第一个 block 并呈现它，然后请求以下 block ，依此类推，直到最后一个。当最后一个完成时，延迟对象被解析以向另一个函数发出所有 block 已加载的信号:

function loadBlock(block, limit) {
  var deferred = $.Deferred();
  (function request(block, limit) {
    $.ajax({
      url: 'block/' + block,
      success: function(html) {
        $('#block-' + block).html(html);
        var nextBlock = block + 1;
        if (nextBlock <= limit)
          request(nextBlock, limit);
        else
          deferred.resolve();
      }
    });
  })(block, limit);

  return deferred.promise();
}

但是，整个等待上一个请求完成的过程会大大减慢处理速度。

所以现在我想做的是一次触发所有请求，让服务器尽可能多地接收请求，但不是在相应的请求完成后加载每个 block ，我希望 block 等到上一个已加载。

示例:发送了 10 个请求。我们希望按顺序呈现 block :1、2、3，...假设前三个 block 的请求按顺序完成，因此 block 按我们的需要加载到页面中，但随后是 block 5在 block 4 之前准备就绪，我们希望将 block 5 保留在某个地方，并仅在 block 4 出现后才在页面中显示它，也就是说，在 block 4 的请求完成并已呈现之后。

我的问题是:

• 我如何并行运行一些触发请求的函数和加载页面 block 的其他函数？
• 我如何向加载特定 block 的函数发出前一个 block 已完成的信号，以便它可以继续？

另外，我需要保留延迟逻辑，因为我仍然需要在整个过程完成时发出信号。

Answer 1

最优雅的方法是使用 Promise.all()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

更基本的方法是标记一个 int 来存储已完成的请求，或者标记一个 Booleans 数组，在每个 AJAX 请求完成后检查它。