Why global variable doesn't seem to be affected by inner scope (Javascript)?

Question

I'm trying to calculate the shortest distance of coordinates taken from a database using Google Map API to a given address. The problem is not there, I managed to alert a shorter distance whenever one is found.But the div named 'duration' has its innerHTML set to the initial value..

I don't get it, I know how scope works.. I've been coding for hours, maybe I just can't see clear anymore.

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>

[Similar](http://stackoverflow.com/questions/20166039/js-geolocation-wait-until-success-before-return-value/20166269#comment30061523_20166269) — Andy, Nov 27 '13 at 17:13
http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Felix Kling, Nov 27 '13 at 17:17

score 4 · Accepted Answer · answered Nov 27 '13 at 17:12

You're doing ajax calls. They're asynchronous by default.

By the time the response from that call comes in and you actually do your "is it shorter" comparison, the rest of the JS code block, including the bit that sets your .innerHTML will already have executed, and set your distance to 9999999.

score 1 · Answer 2 · answered Nov 27 '13 at 17:13

The driving directions service is asynchronous, set the value when it is detected inside the callback routine (when it runs).

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>

score 0 · Answer 3 · answered Nov 27 '13 at 17:13

Try assigning the contents of the div whenever a new shortestDistance is found:

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

Why global variable doesn't seem to be affected by inner scope (Javascript)?

3 Answers3