循环内的嵌套 ajax 调用未按顺序执行答案

【问题标题】：Nested ajax calls inside a loop are not executing in order循环内的嵌套 ajax 调用未按顺序执行
【发布时间】：2016-10-28 08:50:54
【问题描述】：

我有一个嵌套的 AJAX 调用。

AJAX 位：

function a(val){
    var def = $.Deferred();
    return $.ajax({
        type : "get",
        url : "myservlet",
        beforeSend : function() {
            $('#text1').css({
                "color" : "red"
            });
            $('#text1').text("Running Graph");
        },
        data : {
            "boxval" : val
        }
    }).done(function(responseText) {
        $('#text1').css({
            "color" : "green"
        });
        $('#text1').text(responseText);
    }).then(function(){
        return $.when(b());
    });
}

function b(){
    return $.ajax({
        type : "get",
        url : "ConnectServlet",
        beforeSend : function() {
            $('#text2').css({
                "color" : "red"
            });
            $('#text2').text("Copying Files and preparing pSet");
        }
    }).done(function(responseText) {
        $('#text2').css({
            "color" : "green"
        });
        $('#text2').text(responseText); 
    }).then(function(){
        return $.when(c());
    });
}

function c(){
    return $.ajax({
        type : "get",
        url : "CopyServlet",
        beforeSend : function() {
            $('#text3').css({
                "color" : "red"
            });
            $('#text3').text("Running Dynamic Diff Graph");
        }
    }).done(function(responseText) {
        $('#text3').css({
            "color" : "green"
        });
        $('#text3').text(responseText);
    }).then(function(){
        return $.when(d());
    });
}

function d(){
    $('#summary').show();
}

我需要的是整个 ajax 调用链（主 ajax 调用、函数 b、函数 c 和函数 d）按顺序执行循环的每次迭代。

相反，整个主 ajax 调用正在执行，而没有为循环的每次迭代调用函数 b。

我需要它做以下事情：

一个
b
c
d
一个
b
c
d
...

发生的事情是：

一个
一个
一个
...
b

如何解决这个问题？

【问题讨论】：

标签： javascript jquery ajax promise jquery-deferred

【解决方案1】：

每次调用都需要一段时间来执行，而您根本没有考虑到这一点。

您触发了第一个 GET 请求，这可能需要几秒钟才能返回。您的 JavaScript 不会等待这种情况发生并继续执行代码。

一个解决方案是引入类似“javascript promise”的东西。基本上，只有在第一次调用实际完成并且您拥有响应数据时，您才调用函数 b。

这里有一篇文章可以帮助您入门：https://davidwalsh.name/promises

不要停在这里，阅读更多关于这个主题的内容。您可以像这样链接多个事物，并拥有您需要的行为。

【讨论】：