循环内嵌套的ajax调用没有按顺序执行

Nested ajax calls inside a loop are not executing in order

本文关键字：顺序 执行 调用 嵌套 ajax 循环      更新时间：2023-09-26

我有一个嵌套的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

如何解决这个问题?

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

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

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

这里有一篇文章可以让你开始:https://davidwalsh.name/promises

不要停在这里，读更多关于这个主题的文章。你可以像这样链接多个东西，并在你需要的时候拥有它的行为。

相关文章：