如何在其他函数的函数下使用javascript中定义的变量。 以下是我的确切Javascript代码

Question

var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    $(".demo").append("Latitude: " + position.coords.latitude +
        "<br>Longitude: " + position.coords.longitude);
}
var gettingJSON = function() {

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "APPID=4a74787aeb02dcb53dcc8c15e29bdfa1", function(json) {
        $(".para").append(JSON.stringify(json));
    });
}

$(document).ready(function() {
    getLocation();
    gettingJSON();
});

以上是我的代码，出现以下错误

jQuery.Deferred exception: lat is not defined ReferenceError: lat is not defined
    at gettingJSON (file:///G:/WebDev/WeatherAPI/js/main.js:19:73)
    at HTMLDocument.<anonymous> (file:///G:/WebDev/WeatherAPI/js/main.js:26:1)
    at j (file:///G:/WebDev/WeatherAPI/js/jquery.min.js:2:29948)
    at k (file:///G:/WebDev/WeatherAPI/js/jquery.min.js:2:30262) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
k @ jquery.min.js:2
jquery.min.js:2 Uncaught ReferenceError: lat is not defined
    at gettingJSON (main.js:19)
    at HTMLDocument.<anonymous> (main.js:26)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)
gettingJSON @ main.js:19
(anonymous) @ main.js:26
j @ jquery.min.js:2
k @ jquery.min.js:2

该代码不起作用。 我试图从showPosition Fucntion中使用lat和lon，但是它说lat和lon没有定义。 我通过不使用var关键字制作了lat和lon全局变量。 但他们没有工作。 请任何人帮助我。

Answer 1

如果要访问这些变量，建议您从函数中返回它们。 或者，您可以使用类对象执行相同的操作。

Answer 2

我想我发现了问题-

您的getLocation（）函数无法足够快地填充lat和lon，因此当getJSON（）称为lat和lon时尚不存在。

我已经在这里等待了5秒钟，对它进行了测试-

$(document).ready(function(){
    getLocation();  
    gettingJSON();
    //checking lon and lat immediatelly
    console.log("lon:"+lon+ "lat:"+ lat);
    //setting a 5 sec timeout, and checking the lon and lat value again
    setTimeout(function(){ 
        console.log('waiting');
        console.log("lon:"+lon+ "lat:"+ lat);
        }, 5000); 
});

控制台日志：

lon: undefined lat: undefined
after wait:
lon: 34.99041030000001 lat: 32.7888574

这可能是因为用户不允许足够快的位置检查。

也许尝试像这样更改代码：

function showPosition(position) {
  lat=position.coords.latitude;
  lon=position.coords.longitude;
  $(".demo").append("Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude); 
  gettingJSON(); //calling gettingJSON here assures that you already have the coordinates
}

Answer 3

通常，要访问所有函数中的变量，它们应具有全局作用域。 这意味着它们在函数外部声明。

您的lat和lon函数在showPosition(position)内部局部声明。 这意味着它们只能由showPosition(position)函数访问，而不能由gettingJSON()函数访问。

如果您声明var lat=position.coords.latitude;应该会起作用var lat=position.coords.latitude; 和lon=position.coords.longitude; 在showPosition(position)函数之前和之后。

如果您在freecodecamp上工作，那么这里是解释全局和局部变量作用域的链接。 FreeCodeCamp：全局范围 ， FreeCodeCamp：本地范围 ， FreeCodeCamp：全局vs本地范围

另外，您没有调用showPosition(position)函数，切记在调整变量声明（如注释之一所示）后执行此操作

我希望这有帮助。

Answer 4

将所有内容放入自执行函数中，然后在开始时声明变量。 这样，它们不是GLOBAL（您通常不希望将变量设置为GLOBAL），但是它们可用于代码中的所有内容：

(function($){
  var lat, lon, x;

  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    $(".demo").append("Latitude: " + position.coords.latitude +
      "<br>Longitude: " + position.coords.longitude);
  }

  var gettingJSON = function() {
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "APPID=4a74787aeb02dcb53dcc8c15e29bdfa1", function(json) {
      $(".para").append(JSON.stringify(json));
    });
  }

  $(document).ready(function() {
    x = document.getElementById("demo");
    getLocation();
    gettingJSON();
  });

})(jQuery);

Answer 5

为了确保您确实获得了lat的值，可以考虑长时间更改程序的结构，并在 showPosition中调用gettingJSON：

var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    $(".demo").append("Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude);

    //call gettingJson here, pass it lat, lon values...sure to work if lat,lon is in fact gettting populated.
    gettingJSON(lat, lon);

}
var gettingJSON = function(lat, lon) {

$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "APPID=4a74787aeb02dcb53dcc8c15e29bdfa1", function(json) {
    $(".para").append(JSON.stringify(json));
    });
}

$(document).ready(function() {
    getLocation();
});