Javascript 当多个asyc调用完成时，AJAX启动最后一个asyc调用

我正在考虑如何更好地管理运行多个异步调用的顺序，以实现最佳周转时间。基本上这个过程是这样的： 当网页开始加载时，它会显示页面并启动几个AJAX调用a（）、b（）和c（）。完成这三个步骤后，运行异步调用d（）。我检查了几条类似的线，但那不完全相同

我尝试使用多个标志来显示异步调用是否完成，并使用一个block函数来阻止进程，直到可以执行最后一个调用为止

var aFinished=false;
function a() {
      var jsonData = $.ajax({
        url: "${createLink(controller:'environment', action:'a')}",
        dataType: "json",
        async: true
      }).done(function(jsonData) {
          //do something
          aFinished=true;
    });
}
//same flag+function for b() and c()
function d(){
    blockTillAllDone();
    var jsonData=$.ajax(...).done(...);
}
function blockTillAllDone(){
    if(aFinished&&bFinished&&cFinished){
        console.log("Ok to continue");
        return;
    }
    else{
        console.log("Have to wait");
        setTimeout(blockTillAllDone(),2000);
    }
}
a();b();c();d();

性能不是很好，因为递归块函数导致堆栈不断增长。有没有人能更好地理解如何通过更AJAX的方式而不是通过简单的块函数来实现这一点？

---

提前谢谢

您可以尝试基于事件的方法。将方法

a（）

、

b（）

和

c（）

放在一个类中，并在每次检查完成时检查这三个方法是否都完成了，如果完成了，则引发一个事件，该事件将被侦听器捕获，然后它可以执行

d（）

---

我将尝试使用代码演示此功能。

您可以尝试基于事件的方法。将方法

a（）

、

b（）

和

c（）

放在一个类中，并在每次检查完成时检查这三个方法是否都完成了，如果完成了，则引发一个事件，该事件将被侦听器捕获，然后它可以执行

d（）

我将尝试使用代码演示此功能。

您正在寻找的

在解释基础知识方面做得很好。虽然现在很多浏览器都在本地支持它们（除了IE之外），但您仍然希望包含类似polyfill的。一旦你开始使用承诺，你可以通过以下方式解决你的问题：

var a = new Promise(function(resolve,reject){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'example.com/test/1',
        success: function(response){resolve(response);},
        error: function(response){reject(response);}
    });
});

var b = new Promise(function(resolve,reject){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'example.com/test/1',
        success: function(response){resolve(response);},
        error: function(response){reject(response);}
    });
});

var c = new Promise(function(resolve,reject){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'example.com/test/1',
        success: function(response){resolve(response);},
        error: function(response){reject(response);}
    });
});

//This will run once all async operations have successfully finished
Promise.all([a,b,c]).then(
    function(data){
        //everything successful, handle data here
        displayData(data);
    },
    function(data){
        //something failed, handle error here
        logoutError(data);
    }
);

你在找我

在解释基础知识方面做得很好。虽然现在很多浏览器都在本地支持它们（除了IE之外），但您仍然希望包含类似polyfill的。一旦你开始使用承诺，你可以通过以下方式解决你的问题：

var a = new Promise(function(resolve,reject){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'example.com/test/1',
        success: function(response){resolve(response);},
        error: function(response){reject(response);}
    });
});

var b = new Promise(function(resolve,reject){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'example.com/test/1',
        success: function(response){resolve(response);},
        error: function(response){reject(response);}
    });
});

var c = new Promise(function(resolve,reject){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'example.com/test/1',
        success: function(response){resolve(response);},
        error: function(response){reject(response);}
    });
});

//This will run once all async operations have successfully finished
Promise.all([a,b,c]).then(
    function(data){
        //everything successful, handle data here
        displayData(data);
    },
    function(data){
        //something failed, handle error here
        logoutError(data);
    }
);

将检查移动到d（）中，并调用a、b和c的

done（..）

（除非您希望它发生在上，而不管它是否成功-在这种情况下，始终使用

（..）

）

var aFinished=false;
function a() {
      var jsonData = $.ajax({
        url: "${createLink(controller:'environment', action:'a')}",
        dataType: "json",
        async: true
      }).done(function(jsonData) {
          //do something
          aFinished=true;
          d();
      });
}
//same flag+function for b() and c()
function d(){
    if(aFinished&&bFinished&&cFinished){
        var jsonData=$.ajax(...).done(...);
    }
}

a();b();c();

这样就不需要您的

blockTillAllDone

或

setTimeout
将签入d（）并调用
done（…）
（除非您希望它发生在上，无论它是否成功-在这种情况下，始终使用
a、b和c（…）
）

var aFinished=false;
function a() {
      var jsonData = $.ajax({
        url: "${createLink(controller:'environment', action:'a')}",
        dataType: "json",
        async: true
      }).done(function(jsonData) {
          //do something
          aFinished=true;
          d();
      });
}
//same flag+function for b() and c()
function d(){
    if(aFinished&&bFinished&&cFinished){
        var jsonData=$.ajax(...).done(...);
    }
}

a();b();c();

这样就不需要使用
块完成
或
设置超时
换句话说：在检查完成&&bFinished&&cFinished后，将d（）放在a、b和c的完成（）中。和d（）将由最后一个完成的命令激发。我说的对吗？真的很聪明！换句话说：在检查aFinished&&bFinished&&cFinished之后，将d（）放在a、b和c的done（）中。和d（）将由最后一个完成的命令激发。我说的对吗？真的很聪明！仅供参考：这不受任何IE支持，即使是11-但IE问题可以通过使用解决，如答案中所述：）谢谢Victor！我只是编辑了我的答案，让它更清楚。这正是我要找的。非常感谢。仅供参考：这不受任何IE支持，即使是11-但IE问题可以通过使用解决，如答案中所述：）谢谢Victor！我只是编辑了我的答案，让它更清楚。这正是我要找的。非常感谢。这实际上与@ndd的建议相同。快速智能的解决方案。但老实说，我只是好奇AJAX是否可以提供像$.whenConditionMet（{…}）.AJAX（{…}）这样的方法。这实际上与@ndd所建议的方法相同。快速智能的解决方案。但老实说，我只是好奇AJAX是否可以提供类似$.whenConditionMet（{…}）.AJAX（{…}）的方式。