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?