Javascript 循环跳过数组值

Question

我正在尝试使用 javascript 执行 for 循环以遍历数组并打印每个数组的值。它正在使用 Google 距离矩阵 api.

寻找距离和持续时间

我的代码在这里：https://codepen.io/claireben/pen/oaVoNG

var placesdest = ["11205", "11230", "11204", "11234", "33140", "90086"];
$(function() {
  for (var i = 0; i <= 6; i++) {

    function calculateDistance(origin, destination) {
      var service = new google.maps.DistanceMatrixService();
      service.getDistanceMatrix({
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        avoidHighways: false,
        avoidTolls: false
      }, callback);
    }

    function callback(response, status) {
      if (status != google.maps.DistanceMatrixStatus.OK) {
        $('.result').html(err);
      } else {
        var origin = response.originAddresses[0];
        var destination = response.destinationAddresses[0];
        if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
          $('.result').html("Better get on a plane. There are no roads between " +
            origin + " and " + destination);
        } else {
          var distance = response.rows[0].elements[0].distance;
          var distance_value = distance.value;
          var distance_text = distance.text;
          var duration = response.rows[0].elements[0].duration;
          var duration_value = duration.value;
          var duration_text = duration.text;
          var miles = distance_text.substring(0, distance_text.length - 3);
          if (duration_value < 3600) {
            $('.result').html("It is " + distance_text + " from " + origin + " to " + destination + " AND " + duration_text);
          }
        }
      }
    }

    /*$('#distance_form').submit(function(e){
        event.preventDefault();
        var origin = $('#origin').val();
        var destination = $('#destination').val();
        var distance_text = calculateDistance(origin, destination);
    });*/

    //var origin = document.getElementById("originq").innerHTML;
    var origin = "1762 Gerritsen Ave Brooklyn, New York 11229";
    // var destination = document.getElementById("destinationq").innerHTML;
    var destination = placesdest[i];
    var distance_text = calculateDistance(origin, destination);

    var para = "<div class='result'></div>";
    $("body").append(para);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<h2>Distance Between two Addresses</h2>
<!--<form id="distance_form">
    <label>Origin: </label>
    <input id="origin" type="text" name="origin"/>
    <br/>
    <label>Destination: </label>
    <input id="destination" type="text" name="destination"/>
    <br/>
    <input type="submit" value="Calculate"/>
</form>-->
<div id="originq">1762 Gerritsen Ave Brooklyn, New York 11229
</div><div id="destinationq">1507 Coney Island Ave, Brooklyn, NY 11230
</div>

<div id="resultdura">
</div>

问题是它没有遍历整个数组。好像是随便选一个。

我是 javascript 的新手。非常感谢任何帮助。

Answer 1

希望对您有所帮助

在 for 循环之前声明函数

var placesdest = ["11205", "11230", "11204", "11234", "33140", "90086"];
function calculateDistance(origin, destination) {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: [origin],
      destinations: [destination],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.IMPERIAL,
      avoidHighways: false,
      avoidTolls: false
    }, callback);
}

function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    $('.result').html(err);
  } else {
    var origin = response.originAddresses[0];
    var destination = response.destinationAddresses[0];
    if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
      $('.result').html("Better get on a plane. There are no roads between " 
                    + origin + " and " + destination);
    } else {
      var distance = response.rows[0].elements[0].distance;
      var distance_value = distance.value;
      var distance_text = distance.text;
      var duration = response.rows[0].elements[0].duration;
      var duration_value = duration.value;
      var duration_text = duration.text;
      var miles = distance_text.substring(0, distance_text.length - 3);
      // you are validating the duration_value to be more 3600 to be able print
      if (duration_value < 3600) {
        $('#resultdura').append("It is " + distance_text + " from " + origin + " to " + destination + " AND " + duration_text + " <br>");
      }
    }
  }
}

然后创建一个函数来调用 for

function init () {
  for (var i=0; i < placesdest.length; i++) {
    //var origin = document.getElementById("originq").innerHTML;
    var origin = "1762 Gerritsen Ave Brooklyn, New York 11229";
     // var destination = document.getElementById("destinationq").innerHTML;
    var destination = placesdest[i];
    var distance_text = calculateDistance(origin, destination);
  }
}

终于调用init方法初始化脚本

init()

请记住，您正在验证要打印的持续时间，这意味着如果持续时间小于 3600，则不会打印所有目的地

Answer 2

您的代码运行遇到的问题是由于循环的异步性质，而不是以某种方式处理它。有许多库、范例等可以解决这个问题，但要成为 javascript 专业人士，您必须掌握它。我将尝试描述问题，以便您可以尝试在代码的上下文中解决它，而不是向您展示所有这些方法。

首先，我将描述当您运行该循环时发生的情况 - 它将触发 6 个请求，但是当这些请求返回响应数据时以及哪个响应与哪个请求相关你来处理。

当您的请求从循环中被触发时，您可以像这样调用您的异步块：calculateDistance(origin,destination) 它将在请求完成时触发回调函数，您的原始循环如何传递到该 calculateDistance 函数哪个调用哪个请求对应哪个结果的回调？它没有。

查看现有代码，运行循环中的函数 'init()' 至少应将索引变量 i 传递给 calculateDistance(index,origin,distance) 函数，这将然后假设让您能够将其传递到回调函数中，因此它可以匹配结果。您可以有一个具有相同大小的空数组，称为 results，并且在您的回调函数中，如果您在其中传递索引变量 callback(response,status,index)，您可以使用 results[index] = response 设置结果。然后你必须跟踪所有请求何时完成，然后呈现它们。

无论如何，这就是这里发生的事情，这是一个异步问题。那里有很多读物，这是使用 javascript 编码的复杂事情之一。 Javascript是单线程的，理解异步范式很重要，这里就不一一赘述了。

Javascript 循环跳过数组值

Javascript Loop skips array values

javascript

for-loop

google-distancematrix-api