为什么我的变量在我的函数外部未定义？

Question

我是javascript新手，我试图构建一个显示用户区域温度的网站，但我的la和lg变量在我的showPosition()函数之外是未定义的，所以我无法成功调用API得到天气。

下面是完整的代码：

var la; 
var lg; 

function getLocation() { 
if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(showPosition); 
} 

function showPosition(position) { 
la= position.coords.latitude; 
lg= position.coords.longitude; 
} 

getLocation(); 

var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg; 
document.getElementById("im").innerHTML="Latitude:" + la; 

fetch(url) 
.then((resp) => resp.json()) 
.then(function(data) { 
    document.getElementById("temper").innerHTML="Temperature:" + data.main.temp; 
}) 
.catch(function(error) { 
    console.log("error: " + error); 
}); 

我决定测试一下，如果我的la和lg变量与document.getElementById("im").innerHTML="Latitude:" + la线正确的，但我得到Latitude:undefined。我在showPosition()函数中进行了相同的测试，并且正确定义了变量。我该如何解决这个问题？

Answer 1

的问题是，showPosition不会被立刻要求（例如，它需要一些时间来初始化GPS）。因此，你有你的要求等你收到的位置数据，直到：

var la; 
var lg; 

function getLocation() { 
if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(showPosition); 
} 

function showPosition(position) { 
la = position.coords.latitude; 
lg = position.coords.longitude; 

var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg; 
document.getElementById("im").innerHTML="Latitude:" + la; 

fetch(url) 
    .then((resp) => resp.json()) 
    .then(function(data) { 
    document.getElementById("temper").innerHTML="Temperature:" + data.main.temp; 
    }) 
    .catch(function(error) { 
    console.log("error: " + error); 
    }); 
} 

getLocation(); 

Answer 2

使用本：

function getLocation() { 
    if (navigator.geolocation) 
     navigator.geolocation.getCurrentPosition(showPosition); 
} 

function showPosition(position) { 
    var la= position.coords.latitude; 
    var lg= position.coords.longitude; 
    fetchTemperature(la, lg); // create a method for fetch temperature and send la and lg to it 
} 

function fetchTemperature(la, lg){ // method for fetch temperature 
    var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg; 
    document.getElementById("im").innerHTML="Latitude:" + la; 

    fetch(url) 
    .then((resp) => resp.json()) 
    .then(function(data) { 
     document.getElementById("temper").innerHTML="Temperature:" + data.main.temp; 
    }) 
    .catch(function(error) { 
     console.log("error: " + error); 
    }); 
} 

getLocation();