javascript - 如果在 for 循环内，如何等待 XHR 请求结束？

Question

我读过很多答案，但我不明白在这种情况下如何解决这个问题。

我有一系列点，通过外部网站我可​​以确定这些点是在陆地上还是在海上。问题是 for 循环不等待 XHR 请求。

var points = [
  [90, 120],
  [80, 120],
  [70, 120]
];

var land_or_sea = [];
for(var x= 0; x < points.length; x++) {
  var lat_string = points[x][0];
  var lng_string = points[x][1];

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if (this.readyState === 4 && this.status === 200){                  
      var obj = JSON.parse(this.responseText);          
        if (obj.water === true){
          land_or_sea.push(x + 1);                      
        }                           
     }
   }
   xhr.open("GET", "https://api.onwater.io/api/v1/results/" + lat_string + "," + lng_string, true);
   xhr.send();
}

如果点在海上，但由于 for 循环不等待而不起作用，当我应该添加 points 索引时，你怎么会看到 land_or_sea 是一个空数组.

希望你能帮助我。谢谢!

Answer 1

您可以创建递归函数，而不是使用 for 循环。

您可以将数组索引初始化为 0 并将其传递给函数。成功响应后，使用递增的数组索引再次调用相同的函数。一旦达到array.length

，就停止调用该函数

例如:

var points = [
  [90, 120],
  [80, 120],
  [70, 120]
];

var arrIndex = 0;
var land_or_sea = [];

function callAjaxFunc(arrIndex){
  var lat_string = points[arrIndex][0];
  var lng_string = points[arrIndex][1];

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if (this.readyState === 4 && this.status === 200){                  
      var obj = JSON.parse(this.responseText);          
        if (obj.water === true){
          land_or_sea.push(x + 1);    
          if (arrIndex < points.length){
            arrIndex++;
            callAjaxFunc(arrIndex);
          }    
        }                           
     }
   }
   xhr.open("GET", "https://api.onwater.io/api/v1/results/" + lat_string + "," + lng_string, true);
   xhr.send();
}
callAjaxFunc(arrIndex);