Группировка jQuery AJAX-запросов для обеспечения порядка

Question

Я использую jQuery для запуска нескольких запросов AJAX, и мне нужно сгруппировать их так, чтобы запросы из Пакета 1 полностью выполнялись до запуска из Пакета 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>");
        }));
    });
});

Проблема заключается в том, что вторая партия запускается до окончания первой партии.Но, как работает код в настоящее время, я получаю задания серии 2, которые запускаются до того, как пакет 1 завершен:

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: Задача № 1 должна появиться только после завершения def1: Задача № 10.

Answer 1

Звоните только GetSomeDeferredStuff("def2") внутри base.then.Вы также можете использовать Promise.all вместо этого, чтобы значительно упростить код, поскольку отложенные вычисления работают как обещания:

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