Javascript 从具有函数作用域的变量中获取值

我正在做一个家庭作业，用API来显示天气。最初，我在脚本顶部声明了变量“latty”和“lonny”，在主函数作用域中，其他所有内容都在其中，然后使用navigator.geolocation将它们设置为纬度和经度。在将它们设置为坐标后，我尝试将它们作为发送到API的URL行的一部分使用，但latty和lonny的值从未保留。我认为在父函数中声明它们将允许在后续的嵌套函数中使用它们。由于地理定位需要一个函数来获取坐标，因此我不得不将整个脚本嵌套在getPosition（）函数中，以便能够使用它检索到的值：

this.addEventListener("load", navigator.geolocation.getCurrentPosition(getPosition));

function getPosition(position) {
  var latty = position.coords.latitude;
  var lonny = position.coords.longitude;
  var url = "https://api.darksky.net/forecast/";
  var apiKey = '5a4ae697ea6b02e5a4ae697ea6b02e/';

weatherAjax();

function weatherAjax(){
$.ajax({
  url: url + apiKey + latty + "," + lonny + degreeType,
  dataType: 'jsonp',
  success: function(data) {
    $("#weatherID").html("<h1>" + Math.round(data.currently.temperature) + degreeSymbol + data.currently.summary + "</h1>");
  }
}); 
}

this.addEventListener（“加载”，navigator.geolocation.getCurrentPosition（getPosition））；
功能getPosition（位置）{
var latty=位置坐标纬度；
var lonny=位置坐标经度；
变量url=”https://api.darksky.net/forecast/";
变量apiKey='5a4ae697ea6b02e5a4ae697ea6b02e/'；
weatherAjax（）；
函数ajax（）{
$.ajax({
url:url+apiKey+latty+“，”+lonny+degreeType，
数据类型：“jsonp”，
成功：功能（数据）{
$（“#weatherID”）.html（“+Math.round（data.current.temperature）+degreeSymbol+data.current.summary+”）；
}
}); 
}

有没有更好的方法来做到这一点，而不必将所有内容嵌套在getPosition（）中？似乎很奇怪，我无法从地理位置获取信息，将这些坐标设置为一个变量，然后将它们调用到另一个函数中。我也不知道如何返回这些信息，我不会在这里与您分享这些混乱，因为这太糟糕了

---

我将作用域的基本思想理解为：您只能访问嵌套顺序中“更高”的变量。同级或子函数不会“共享”变量访问。这是否正确？这可以改进吗？

您的脚本存在一些问题

首先，

navigator.geolocation.getCurrentPosition（…）

返回

未定义的
，因此您实际上没有将事件处理程序附加到页面
load
事件，而对
addEventListener（）
的调用不会执行任何操作，并且会以静默方式失败

其次，有一种更好的方法来组织脚本，这样您就不必将脚本嵌套在
getPosition（）
回调中。使用函数参数：

navigator.geolocation.getCurrentPosition(getPosition);

function getPosition(position) {
  var latty = position.coords.latitude;
  var lonny = position.coords.longitude;
  var url = "https://api.darksky.net/forecast/";
  var apiKey = '5a4ae697ea6b02e5a4ae697ea6b02e/';

  weatherAjax(latty, lonny, url, apiKey);
}

function weatherAjax(latty, lonny, url, apiKey) {
  $.ajax({
    url: url + apiKey + latty + "," + lonny + degreeType,
    dataType: 'jsonp',
    success: function (data) {
      $("#weatherID").html("<h1>" + Math.round(data.currently.temperature) + degreeSymbol + data.currently.summary + "</h1>");
    }
  }); 
}

总的来说，你会发现：

window.addEventListener('load', function () {

  navigator.geolocation.getCurrentPosition(getPosition);

  function getPosition(position) {
    var latty = position.coords.latitude;
    var lonny = position.coords.longitude;
    var url = "https://api.darksky.net/forecast/";
    var apiKey = '5a4ae697ea6b02e5a4ae697ea6b02e/';

    weatherAjax(latty, lonny, url, apiKey);
  }

  function weatherAjax(latty, lonny, url, apiKey) {
    $.ajax({
      url: url + apiKey + latty + "," + lonny + degreeType,
      dataType: 'jsonp',
      success: function (data) {
        $("#weatherID").html("<h1>" + Math.round(data.currently.temperature) + degreeSymbol + data.currently.summary + "</h1>");
      }
    });
  }

});

window.addEventListener（'load'，function（）{
navigator.geolocation.getCurrentPosition（getPosition）；
功能getPosition（位置）{
var latty=位置坐标纬度；
var lonny=位置坐标经度；
变量url=”https://api.darksky.net/forecast/";
变量apiKey='5a4ae697ea6b02e5a4ae697ea6b02e/'；
weatherAjax（latty、lonny、url、apiKey）；
}
函数weatherAjax（latty、lonny、url、apiKey）{
$.ajax({
url:url+apiKey+latty+“，”+lonny+degreeType，
数据类型：“jsonp”，
成功：功能（数据）{
$（“#weatherID”）.html（“+Math.round（data.current.temperature）+degreeSymbol+data.current.summary+”）；
}
});
}
});
听起来您可能把函数作用域与同步和异步代码混淆了。因为您有工作代码，所以这并不完全是重复的。但是您要寻找的答案可能在这里：
getCurrentPosition（）
是异步的。因此，在收到数据之前，您无法访问数据。这与尝试吃一个尚未送达的比萨饼是一样的。感谢您的指点。我使用了setTimeout，但没有意识到它可能会在某个点上延迟2秒以上，因为它从未失败过。我根据您的answe更改了代码R
window.addEventListener('load', function () {

  navigator.geolocation.getCurrentPosition(getPosition);

  function getPosition(position) {
    var latty = position.coords.latitude;
    var lonny = position.coords.longitude;
    var url = "https://api.darksky.net/forecast/";
    var apiKey = '5a4ae697ea6b02e5a4ae697ea6b02e/';

    weatherAjax(latty, lonny, url, apiKey);
  }

  function weatherAjax(latty, lonny, url, apiKey) {
    $.ajax({
      url: url + apiKey + latty + "," + lonny + degreeType,
      dataType: 'jsonp',
      success: function (data) {
        $("#weatherID").html("<h1>" + Math.round(data.currently.temperature) + degreeSymbol + data.currently.summary + "</h1>");
      }
    });
  }

});