Дождитесь окончания цикла Loop, прежде чем передавать значение в JavaScript (также Google Maps).

Question

Я не очень часто использую javascript, поэтому не очень хорошо знаю обратные вызовы и ответы.Я использую карты Google, чтобы отобразить расстояние между точкой A и точкой X, Y, Z.Суть в том, что я хочу использовать javascript, чтобы определить, какая из точек X, Y, Z ближе всего к A, и они отображают направления между ними.

Мой код работает.Я могу определить кратчайшее расстояние из всех 3 пунктов назначения, но я застрял с этим тупым взглядом.

Видите ли, Google использует асинхронные обратные вызовы для предоставления данных в браузер и если я запускаю цикл for для проверкивсе 3 направления 1 на 1 я получаю неверные результаты.

Вот код:

var maxDistance = 99999999999;
var destn;
for (var i = 0; i < locations.length; i++) {
  var thisDistance = 0;
  var start = origin;
  var end = locations[i];
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      thisDistance = response.routes[0].legs[0].distance.value;
      if (thisDistance < maxDistance) {
        destn = response.routes[0].legs[0].end_address;
        maxDistance = thisDistance;
      }
    } else {
      document.getElementById("addressNotFound").style.display = 'block';
    }
  });
}
calcShortestRoute(origin, destn);

Так что, очевидно, когда я вызываю эту функцию, значение destn становится неопределенным, так как цикл завершается, и обработчик Google еще не получил данные.Если я вызову функцию еще 1 раз, я получу значение destn, полученное от предыдущего обратного вызова (который дал неопределенный ранее).

Кто-то, пожалуйста, скажите мне, как я могу это исправить.

Answer 1

Вам нужно подождать, пока не будут возвращены все три ответа Google.Простое решение: переместить вызов функции вычисления расстояния в конце в анонимную функцию, а затем вычислить расстояния только в том случае, если все ответы вернулись:

        // global count variable
        var callbackCount = 0;

        for (var i = 0; i<locations.length; i++) {
            var thisDistance=0;
            var start = origin;
            var end = locations[i];
            var request = {
                origin:start,
                destination:end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    thisDistance = response.routes[0].legs[0].distance.value;
                    if (thisDistance < maxDistance) {
                        destn = response.routes[0].legs[0].end_address;
                        maxDistance = thisDistance;
                    }                            
                }
                else {
                    document.getElementById("addressNotFound").style.display = 'block';
                }

                // move this to here, and pass in number of locations
                calcShortestRoute(origin, destn, locations.length);
            });



        }

, тогда calcShortestRoute выглядит так:*

Answer 2

У вас не будет значения в destn при выходе из цикла for, потому что оно установлено асинхронно после того, как вы получите результаты от directionsService.route().Вместо этого вам нужно будет отслеживать, сколько запросов было возвращено, и вызывать вашу функцию из ответного обратного вызова после получения всех ответов:

... // your code
var responseCount = 0;
for (var i = 0; i < locations.length; i++) {
    ... // your code
    directionsService.route(request, function(response, status) {
        ... // your code
        if (++responseCount == locations.length) {
            calcShortestRoute(origin, destn);
        }
    });
}

Редактировать: Я перечитал ваш вопрос и думаю, что лучше понимаю, что делает ваш код.Этот ответ должен быть более точным (и более кратким для загрузки!).