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

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

这会在控制台中记录 undefined undefined。但是，如果我直接调用 Chrome 开发控制台中的函数（没有 onload），它工作得很好。

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

如何修改这些全局变量？

Answer 1

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

Geolocation.getCurrentPosition - 此 API 将第一个参数作为 success 回调，将第二个可选参数作为 error 回调.

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

因为 console.log 在 getLocation() 函数下面。执行时可能异步请求未完成，成功回调未调用。

所以 lat 和 long 的值在那个时候没有填充，undefined 是返回。

要等到回调函数完成，您可以使用标志变量和 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>

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

Not able to modify global variables inside function

html

javascript

web-deployment

typescript