為什么全局變量似乎不受內部作用域（Javascript）的影響？

Question

我正在嘗試使用Google Map API計算從數據庫獲取的坐標到給定地址的最短距離。 問題不存在，只要找到一個，我就設法向更短的距離發出警報。但是名為“ duration”的div的innerHTML設置為初始值。

我不明白，我知道范圍是如何工作的。我已經編碼了幾個小時，也許我看不清了。

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var shortestDistance= 99999999;
var myOptions = {
  zoom:7,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var positions = new Array();
<?php
  while($row = mysqli_fetch_array($result)){
    echo'positions.push(['.$row['latitude'].','.$row['longitude'].']);';
  }
?>

for(var i=0;i<positions.length;i++){
  var originTemp = "";
  originTemp += positions[i][0] + "," + positions[i][1];
  var request = {
    origin: originTemp,
    destination: "1 Ste-Catherine St.",
    durationInTraffic: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
   };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var newRoute = response.routes[0].legs[0].duration.value;
      directionsDisplay.setDirections(response);
      if(newRoute<shortestDistance){
        shortestDistance=newRoute;
        alert("New shorter distance: "+shortestDistance);
      }
    }
  });
}
document.getElementById('duration').innerHTML += shortestDistance + " seconds";
</script>

Answer 1

您正在執行ajax調用。 它們默認是異步的。

到該調用的響應出現並且您實際進行“是否更短”比較時，其余JS代碼塊（包括設置.innerHTML的位）將已經執行，並將距離設置為9999999。

Answer 2

行車路線服務是異步的，請在回調例程內（運行時）檢測到該值。

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var shortestDistance= 99999999;
var myOptions = {
  zoom:7,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var positions = new Array();
<?php
  while($row = mysqli_fetch_array($result)){
    echo'positions.push(['.$row['latitude'].','.$row['longitude'].']);';
  }
?>

for(var i=0;i<positions.length;i++){
  var originTemp = "";
  originTemp += positions[i][0] + "," + positions[i][1];
  var request = {
    origin: originTemp,
    destination: "1 Ste-Catherine St.",
    durationInTraffic: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
   };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var newRoute = response.routes[0].legs[0].duration.value;
      directionsDisplay.setDirections(response);
      if(newRoute<shortestDistance){
        shortestDistance=newRoute;
        document.getElementById('duration').innerHTML += shortestDistance + " seconds";
        alert("New shorter distance: "+shortestDistance);
      }
    }
  });
}
</script>

Answer 3

每當發現新的shortestDistance時，嘗試分配div的內容：

  if(newRoute<shortestDistance){
    shortestDistance=newRoute;
    alert("New shorter distance: "+shortestDistance);
    document.getElementById('duration').innerHTML = shortestDistance + " seconds";
  }