无法修改函数内的全局变量

Question

我正在尝试修改在任何函数范围之外、函数内声明的变量，但变量仍未定义。我正在使用window.onload触发该函数。

这是JS代码：

var lat;
var long;
function showPosition(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
const apikey_gmaps = "xyz";

fetch("https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+long+"&key="+apikey_gmaps)
.then(
function(response){
if (response.status !== 200){
console.log("Error while getting location");
return;
}
response.json().then(function(address){
var parsedAddress = address.results[0].formatted_address;
var city = address.results[0].address_components[0].long_name;
});
}
)
.catch(function(err){
console.log(err);
});
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
//Function to get location
function getLocation() {
var weatherText = document.querySelector("#xyz");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,error,options);
} else {
weatherText.innerHTML = "Error getting location";
}
function ErrorCase(error) {
weatherText.innerHTML = "Couldn't fetch location";
}
}

window.onload = function(){
getLocation();
console.log(lat,long);
}

这将记录控制台中未定义的未定义。但是，如果我直接在我的 Chrome 开发控制台中调用这些函数(无需加载(，它工作得很好。

我尝试使用body onload="someFn(("，尝试在onload=function(({}中声明变量，但没有成功。

如何修改这些全局变量？

Answer 1

navigator.geolocation.getCurrentPosition(showPosition,error,options);

Geolocation.getCurrentPosition - 此 API 将第一个参数作为成功回调，将第二个可选参数作为错误回调。

它异步尝试获取设备的当前位置。如果尝试成功，将调用成功回调。

由于控制台.log在getLocation((函数下方。在执行时，异步请求可能未完成，并且不会调用成功回调。

因此，当时不会填充纬度和经度的值，并返回未定义。

要等到回调函数完成，您可以使用标志变量和 setInterval。

<script>
var lat;
var long;
var callBackStatus;
function showPosition(position) {
callBackStatus = true;
lat = position.coords.latitude;
long = position.coords.longitude;
const apikey_gmaps = "xyz";

fetch("https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+long+"&key="+apikey_gmaps)
.then(
function(response){
if (response.status !== 200){
console.log("Error while getting location");
return;
}
response.json().then(function(address){
var parsedAddress = address.results[0].formatted_address;
var city = address.results[0].address_components[0].long_name;
});
}
)
.catch(function(err){
console.log(err);
});
}
function error(err) {
callBackStatus = true;
console.warn(`ERROR(${err.code}): ${err.message}`);
}
//Function to get location
function getLocation() {
var weatherText = document.querySelector("#xyz");
callBackStatus = false;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,error);
} else {
weatherText.innerHTML = "Error getting location";
}
function ErrorCase(error) {
weatherText.innerHTML = "Couldn't fetch location";
}
}

window.onload = function(){
getLocation();
var interval = setInterval(function() {
if (callBackStatus) {
console.log(lat, long);
clearInterval(interval);
} else {
console.log("Waiting for callback");
}
}, 50);
}
</script>