доступ к значению переменной вне функции

Question

У меня есть 2 функции в моем сценарии. Цель функции # 1 - создать URL-адрес "mapsURL"

Цель второй функции - запустить запрос .ajax с "mapsURL"

Однако у меня возникли проблемы с доступом к "mapsURL" во второй функции. Я объявил «mapsURL» в первой функции без «var». Насколько я понимаю, это должно сделать значение this глобальным, и я должен иметь возможность доступа к нему из других функций. Мое понимание неверно или что я здесь упускаю?

вот мой JS:

примечание: я удалил свой ключ API для этого поста, так что проблема не в этом

$(document).ready(function (){


  navigator.geolocation.getCurrentPosition(function (position) {
     var positionLat = position.coords.latitude
     var positionLon = position.coords.longitude
     mapsURL = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + positionLat + "," + positionLon + "&key=***mykeygoeshere***";
  });


 function getData (){
   $.ajax({
     url: mapsURL,
     dataType: 'json',
     success: function(response){
      console.log(response);
     }
    });
  };

  getData();

});

Answer 1

getCurrentPosition является асинхронным. Он не присваивается mapsURL немедленно, поэтому при вызове getData синхронно , mapsURL еще не было заполнено.

Вы должны вызывать getData внутри обратного вызова getCurrentPosition, что также позволит вам избежать использования глобальной переменной:

$(document).ready(function() {
  navigator.geolocation.getCurrentPosition(function(position) {
    var positionLat = position.coords.latitude
    var positionLon = position.coords.longitude
    var mapsURL = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + positionLat + "," + positionLon + "&key=***mykeygoeshere***";
    getData(mapsURL);
  });
  function getData(mapsURL) {
    $.ajax({
      url: mapsURL,
      dataType: 'json',
      success: function(response) {
        console.log(response);
      }
    });
  }
});