为何currentLon、currentLat变量返回undefined？该如何修复？

你的推测完全正确，navigator.geolocation.getCurrentPosition是异步API——它不会阻塞后续代码执行，而是在浏览器成功获取到用户位置后，才会调用show回调函数给变量赋值。而你的同步代码（比如直接调用console.log(currentLon)、Sidebar()）会先于回调执行，这时候变量还没被赋值，自然返回undefined。

下面是几种实用的修复方案：

方案1：把依赖位置的逻辑放到回调内 #

最直接的方式，确保所有需要使用经纬度的代码，都在变量赋值完成后执行：

let currentLon;
let currentLat;

function show(position) {
  currentLon = position.coords.longitude;
  currentLat = position.coords.latitude;
  console.log(currentLon); // 正常输出

  // 在这里执行所有依赖位置的逻辑
  console.log(currentLon); // 现在有值
  Sidebar();
}

// 异步获取位置
navigator.geolocation.getCurrentPosition(show);

function Sidebar() {
  const setToCurrent = () => {
    const lat = currentLat;
    const lon = currentLon;
    console.log("set to current location");
    console.log(lon, lat, "lon and  lat"); // 正常输出
    console.log(currentLon); // 正常输出
  };
  
  setToCurrent()

  return null;
}

方案2：用Promise封装+async/await（更优雅的异步处理） #

适合复杂场景，避免回调嵌套，代码逻辑更清晰：

// 把位置获取封装成Promise
function getCurrentLocation() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      (position) => resolve(position.coords),
      (error) => reject(error)
    );
  });
}

// 用async/await等待异步结果
async function initApp() {
  try {
    const coords = await getCurrentLocation();
    const currentLon = coords.longitude;
    const currentLat = coords.latitude;
    
    console.log(currentLon); // 正常输出
    Sidebar(currentLon, currentLat); // 把位置作为参数传入组件
  } catch (error) {
    console.error("获取位置失败:", error);
  }
}

function Sidebar(lon, lat) {
  const setToCurrent = () => {
    console.log("set to current location");
    console.log(lon, lat, "lon and  lat"); // 正常输出
    console.log(lon); // 正常输出
  };
  
  setToCurrent()

  return null;
}

// 启动应用
initApp();

方案3：监听位置更新（适合实时响应场景） #

如果你的逻辑需要在位置变化时自动触发，可以通过监听函数触发后续操作：

let currentLon;
let currentLat;

// 定义位置更新后的处理逻辑
function handleLocationUpdate() {
  console.log(currentLon); // 正常输出
  Sidebar();
}

function show(position) {
  currentLon = position.coords.longitude;
  currentLat = position.coords.latitude;
  // 位置赋值完成后触发处理逻辑
  handleLocationUpdate();
}

navigator.geolocation.getCurrentPosition(show);

function Sidebar() {
  const setToCurrent = () => {
    const lat = currentLat;
    const lon = currentLon;
    console.log("set to current location");
    console.log(lon, lat, "lon and  lat"); // 正常输出
  };
  
  setToCurrent()

  return null;
}

核心要点：异步API的回调执行时机晚于同步代码，所有依赖异步结果的逻辑，必须等待回调完成后再执行，不能在同步代码里直接调用未赋值的变量。

内容的提问来源于stack exchange，提问作者tices