无法在函数[duplicate]中修改全局变量

Question

此问题已经在这里有了答案：

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference （6个答案）

关闭58分钟前。

我正在尝试修改在任何函数范围之外声明的变量，在函数内，但是变量保持未定义。我正在使用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开发者控制台中调用这些函数（没有加载），则效果很好。

我尝试使用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>