时间戳

首页 > 解决方案 > 在阅读底部代码之前等待循环完成

javascript - 在阅读底部代码之前等待循环完成

问题描述

就像标题所说的那样，即使顶部的循环还没有完成，底部的代码也会被读取。

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

顺便说一句，此事件在事件单击后被调用，因此第一次单击数组上不会有任何内容，但在第二次单击时它会按我的意愿工作。

我已经尝试过使用承诺并等待，但仍然相同。

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

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

标签： javascriptweb-servicespromise

解决方案

在获取距离之前检查最后一个循环，在 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>";
            }
        }
    }

推荐阅读