等待循环完成，然后再读取底部代码

Question

就像标题所说的一样，即使顶部的循环尚未完成，底部代码也会被读取。

当您查看控制台时，距离[$x].rows[0].elements[0].distance.text中的"行"尚未定义，因为推送方法尚未生效。

顺便说一句，这个事件是在事件单击后调用的，所以第一次单击数组上不会有任何内容，但在第二次单击时它会像我想要的那样工作。

我已经尝试使用承诺和等待，但仍然是一样的。

var distanceService = new google.maps.DistanceMatrixService;
for($z=0;$z<ppos.length;$z++){
  distanceService.getDistanceMatrix({
      origins: [pos],
      destinations: [ppos[$z]],
      travelMode: 'DRIVING',
    },
    function (response, status) {
      if (status != google.maps.DistanceMatrixStatus.OK) {
        console.log('Error:', status);
      } else {
        console.log(response);
        distance.push(response);
      }
    }
  );
}
var content="";
if(distance.length>0){
  for($x=0;$x<3;$x++){
    content+='<div class="row"><div class="col-lg-12"><h4><strong>'+plists[$x].name+'</strong></h4><p><em>Address:'+plists[$x].vicinity+'</em></p><p><em>Distance:'+distance[$x].rows[0].elements[0].distance.text+'</em></p></div></div>';
  }
}

我想要的是，在读取底部代码之前，应该先将值放入距离数组中。

Answer 1

在获取距离之前检查最后一个循环，异步调用被调用到循环中，但循环不会等待它们的响应：

var res = 0;
var distanceService = new google.maps.DistanceMatrixService();
    for ($z = 0; $z < ppos.length; $z++) {
        distanceService.getDistanceMatrix(
            {
                origins: [pos],
                destinations: [ppos[$z]],
                travelMode: "DRIVING"
            },
            function(response, status) {
                // Response has arrived!
                res ++;
                if (status != google.maps.DistanceMatrixStatus.OK) {
                    console.log("Error:", status);
                } else {
                    console.log(response);
                    distance.push(response);
                    // If it is the last loop...
                    if(res === ppos.length) {
                       getDistance();
                    }
                }
            }
        );
    }
    var content = "";
    function getDistance() {
        if (distance.length > 0) {
            for ($x = 0; $x < 3; $x++) {
                content +=
                    '<div class="row"><div class="col-lg-12"><h4><strong>' +
                    plists[$x].name +
                    "</strong></h4><p><em>Address:" +
                    plists[$x].vicinity +
                    "</em></p><p><em>Distance:" +
                    distance[$x].rows[0].elements[0].distance.text +
                    "</em></p></div></div>";
            }
        }
    }