Question

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

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

此事件在单击事件后被调用，因此第一次单击时阵列上将没有任何内容，但第二次单击时它将按我的意愿工作。

我已经尝试过使用promise并等待，但是仍然一样。

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

在获取距离之前检查最后一个循环，调用for循环，但循环不等待其响应：

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>";
            }
        }
    }

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

1 个答案: