JQuery Откладывается в каждом цикле с обратным вызовом AJAX

В отношенииhttps://stackoverflow.com/a/13951699/929894, Я попытался использовать отложенный объект во вложенном цикле ajax. Однако вывод не возвращается, как ожидалось. Я обновил свой код в скрипте для справки. -https://jsfiddle.net/fewtalks/nvbp26sx/1/.

КОД:

  function main() {
    var def = $.Deferred();
    var requests = [];
    for (var i = 0; i < 2; i++) {
        requests.push(test(i));
    }
    $.when.apply($, requests).then(function() {
        def.resolve();
    });

    return def.promise();
}

function test(x){
    var def = $.Deferred();
  test1(x).done(function(){
                setTimeout(function(){ console.log('processed test item', x); def.resolve();}, 1000);
          });
  return def.promise();
}

function test1(items){
    var _d = $.Deferred();
  setTimeout(function(){ 
    console.log('processed test1 item', items); 
    _d.resolve();
  });
  return _d.promise();
}

main().done(function(){ console.log('completed')});

Код содержит основную функцию, которая выполняет цикл. В каждом цикле выполняется подфункция (тест). Внутри подфункции (test) вызывается другая функция (test1). Обе подфункции test и test1 имеют объявление вызова AJAX. Для вызова AJAX я использовал свойство setTimeout. Я ожидаю выходной как

processed test1 item0
processed test item0
processed test1 item1
processed test item0
completed

Для каждого цикла я хочу, чтобы функция выполнялась как Test1 (), а затем test (); Однако я получаю результат как

processed test1 item 0
 processed test1 item 1
processed test item 0
processed test item 1
completed

После выполнения теста test1 выполняется функция y. Почему функция не выполняется последовательно для каждого цикла.

Обновленный код для другого теста

function main(items) {
    var items = items;
    return items.reduce(function (p, index) {
        return p.then(function () {
            return test(index);
        });
    }, $.Deferred().resolve());
}

function test(x) {
    var def = $.Deferred();
    test1(x).done(function () {
        setTimeout(function () {
            log('processed test item', x);
            def.resolve();
        }, 1000);
    });
    return def.promise();
}

function test1(items) {
    var _d = $.Deferred();
    setTimeout(function () {
        log('processed test1 item', items);
        _d.resolve();
    });
    return _d.promise();
}

var items = [0, 1];
function test2(x) {
    var _d = $.Deferred();
    setTimeout(function () {
        log('processed test2 item',x);
        _d.resolve();
    });
    return _d.promise();
}

main([1,2]).done(function(data){test2(items);}).then(function () {
    log('completed')
});
<script src="https://dl.dropboxusercontent.com/u/7909102/log.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

почему «завершено» регистрируется перед обработкой функции test2?

Ответы на вопрос(1)

Ваш ответ на вопрос