时间戳

首页 > 解决方案 > 无法修改函数内的全局变量

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

问题描述

我正在尝试在函数内修改在任何函数范围之外声明的变量，但是这些变量仍然是 undefined。我正在使用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(){} 中声明变量，但没有成功。

如何修改这些全局变量？

标签： javascripthtmltypescriptweb-deployment

解决方案

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

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

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

由于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>

推荐阅读