Question

我正在做一个家庭作业项目，使用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>");
  }
}); 
}

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

我理解范围的基本概念是：您只能访问嵌套顺序中“更高”的变量。兄弟级或子功能不会“共享”变量访问。它是否正确？这可以改进吗？

Answer 1

您的脚本存在一些问题。

首先，navigator.geolocation.getCurrentPosition(...)返回undefined，因此您实际上并未将事件处理程序附加到页面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>");
    }
  }); 
}

所以，最后，如果您希望在页面加载后实际运行，请将所有这些内容放入load的匿名回调中：

window.addEventListener('load', function () {
  // everything above goes in here
});

总之，你得到这个：

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>");
      }
    });
  }

});

从函数范围为

1 个答案: