FreeCodeCamp本地天气项目：navigator.geolocation结果不稳定求助

嘿，我看了你遇到的问题——点击按钮后有时候显示默认的东京附近（lat=35、lon=139）的天气，有时候才会加载你所在城市的数据，这个情况其实是异步操作的顺序问题导致的，很常见，咱们来一步步捋清楚：

问题根源 #

navigator.geolocation.getCurrentPosition是一个异步函数，也就是说它不会立刻返回定位结果，而是在后台获取到用户位置后，才会调用你写的success回调函数去更新lat和lon的值。

但你现在的代码逻辑是：点击按钮后，刚触发定位请求，还没等success执行（也就是lat和lon还是初始的35、139），就直接去拼接API链接、发起天气请求了。偶尔能显示本地数据，只是因为浏览器定位速度特别快，或者有缓存的定位数据，刚好在请求发起前完成了success的执行——这完全是碰运气的事儿。

修正方案：把依赖定位结果的代码放进回调里 #

你需要把所有用到lat和lon的操作（拼接API、请求天气、更新页面）都移到success函数内部，这样只有当定位成功拿到真实经纬度后，才会执行这些步骤，彻底避免使用默认值的情况。修改后的代码如下：

var apiBase = "https://fcc-weather-api.glitch.me/api/current"; 
var defaultLat = 35; 
var defaultLon = 139; 
var options = { 
  enableHighAccuracy: true, 
  timeout: 5000, 
  maximumAge: 0 
}; 

function success(pos) { 
  var crd = pos.coords; 
  const lat = crd.latitude; 
  const lon = crd.longitude; 

  // 所有依赖定位结果的操作都放在这里
  $(".message").html(`${lat} ${lon}`); 
  // 拼接完整的API地址
  const fullApiUrl = `${apiBase}?lat=${lat}&lon=${lon}`; 
  $(".message").html(fullApiUrl); 
  // 请求天气数据
  $.getJSON(fullApiUrl, function(json){ 
    $(".message").html(`${json.name} ${json.main.temp}ºC`); 
  });
}; 

function error(err) { 
  $("#error").html(`ERROR(${err.code}): ${err.message}`);
  // 可选：定位失败时使用默认位置加载天气
  const fallbackApi = `${apiBase}?lat=${defaultLat}&lon=${defaultLon}`;
  $.getJSON(fallbackApi, function(json){ 
    $(".message").html(`${json.name} ${json.main.temp}ºC`); 
  });
}; 

$(document).ready(function() { 
  $("#getMessage").on("click", function(){ 
    navigator.geolocation.getCurrentPosition(success, error, options); 
  }); 
});

关键修改点说明 #

1. 把拼接API、请求天气的代码全部移入success回调，确保只有拿到真实经纬度后才会执行这些操作。
2. 把原来的全局lat/lon改成回调内的局部变量，避免全局变量污染，逻辑更清晰。
3. 新增了定位失败时的 fallback 逻辑（可选），如果用户拒绝授权或者定位超时，会自动加载默认位置的天气，提升用户体验。

这样修改后，点击按钮就会稳定获取你的本地天气，再也不会随机跳转到默认位置啦！

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