javascript - 在循环中发送 jquery ajax 请求

Question

我在我的 Web 应用程序的 map 上实现了“空间选择”，它选择了街道的数量。选择后，我会获得使用“选择处理程序”选择的所有街道的唯一街道 ID。

我的下一步是根据 Street Id 向服务器发送 Ajax 请求并取回响应。目前，我只使用单个 For 循环并按如下方式为每个街道 ID 发送 Ajax 请求。

for (var index in streetIds) {
    sendAjaxRequest(streetIds[index]);
}

function sendAjaxRequest(streetId) {
  $.ajax({
      type : 'POST',
      url :  OpenLayers.ProxyHost + this.url,
      data : streetId,
      success : function(response) {
          sos.parseSOSObservations(response);
      },
      error : function(x, e) {
          alert("Something went wrong in the request" + e);
      }
  });
}

例如:如果用户在 map 上选择了 1000 条街道，那么我的程序将发送 1000 个 post 请求，这显然会减慢我的应用程序并阻止浏览器。

任何人都可以提出建议，在这种情况下，考虑到 Web 应用程序的性能，我如何处理多个并发的 Ajax 请求？

Answer 1

每个请求都是异步的，因此发出一堆这样的请求非常快，但扩展性不太好。每次发出请求时，一些开销进程都会包装每个请求。它非常非常小，所以几十个请求还算不错，当它有一千个请求，乘以一百个用户(或更糟)时，你就会开始遇到问题。

如果您决定继续这个方向，如果您提前计划，稍后将其转换为一个请求很容易。构建一个业务委托(delegate)，以便它获取一个列表并在获得所有响应后调用回调。有点像

MyWS = new MyWS(); // MyWS = your web service class
function getList(list,callback){
    var results = _.map(list,function(value,key){
        MyWS.getStreetDetail(value,function(response){
            console.log(response) // {data:{name:"LoveTree Way"...}}
            results[key] = response.data;
            check();
        });
    });
    function check(){
        if(_.all(results,function(value){return !!value;}))
            callback(results);
    }
}
list = [268,320,380];
getList(list,function(results){
    alert("results",results.toSource())
});

当然，我会将 getList 函数直接构建到您的委托(delegate)中，这样您就可以忘记它了。

new MyWS().getList([268,320,380],function(data){
    console.log("data",data)
});