对 jQuery AJAX 请求进行分组以强制执行顺序

Question

我正在使用 jQuery 启动多个 AJAX 请求，并且需要对它们进行分组，以便 Batch 1 的请求在 Batch 2 开始之前完全执行。说明这一点的 JSFiddle 位于 http://jsfiddle.net/ax5mty3q/ 。相关代码如下：

$(function() {
    $("a").click(function() {
        var deferreds = GetSomeDeferredStuff("def1");
        var deferreds2 = GetSomeDeferredStuff("def2");

        var base = $.when({});

        base = base.then($.when.apply(null, deferreds));

        // I want to stop here until def1 batch is completed

        base = base.then($.when.apply(null, deferreds2).done(function() {
            $("div").append("<p>All done!</p>");
        }));
    });
});

问题是第二批在第一批完成之前开始。但是代码当前的工作方式是在第 1 批完成之前开始执行第 2 批作业：

Click me!
def1: Task #1 complete.
def1: Task #2 complete.
def1: Task #3 complete.
def1: Task #4 complete.
def1: Task #5 complete.
def1: Task #6 complete.
def2: Task #1 complete.
def2: Task #2 complete.
def1: Task #7 complete.
def2: Task #3 complete.
def1: Task #8 complete.
def1: Task #9 complete.
def2: Task #4 complete.
def2: Task #5 complete.
def1: Task #10 complete.
def2: Task #6 complete.
def2: Task #7 complete.
def2: Task #8 complete.
def2: Task #9 complete.
def2: Task #10 complete.
All done!

有没有办法在第一批完成之前控制第二批？换句话说，def2: Task #1 应该只在 def1: Task #10 完成后出现。

Answer 1

仅在base.then 内调用GetSomeDeferredStuff("def2")。您也可以改用Promise.all 来大大简化代码，因为 deferred 就像 Promises 一样工作：

$("a").click(function() {
  var deferreds = GetSomeDeferredStuff("def1");
  Promise.all(deferreds)
    .then(() => Promise.all(GetSomeDeferredStuff("def2")))
    .then(() => {
      $("div").append("<p>All done!</p>");
    })
    .catch((err) => {
      // something went wrong, handle errors
    });
});