FreeCodeCamp API加载超时或失败，Codepen中JS/Jquery天气加载异常求助

我之前做类似项目的时候也碰到过这个糟心的情况，咱们一步步来排查和优化：

1. 先确认API本身的稳定性 #

你用的那个Glitch上的FCC演示天气API，本身是免费的测试服务，服务器资源有限，高峰时段响应慢甚至超时都是很常见的。如果只是练习项目，咱们可以通过代码优化来缓解；如果是面向用户的正式项目，建议换成更稳定的商业天气API。

2. 给请求加超时和错误处理 #

原代码里的$.getJSON默认没有超时设置，如果API没响应，会一直挂着等待，这就是你看到加载超5分钟的核心原因。咱们换成$.ajax手动设置超时，同时加上错误处理，能及时给用户反馈：

$(document).ready(function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;
      
      $.ajax({
        url: `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${lon}`,
        dataType: 'json',
        timeout: 10000, // 设置10秒超时，避免无限等待
        success: function(data) {
          handleWeatherData(data);
        },
        error: function(xhr, status, error) {
          console.error('天气数据加载失败:', status);
          alert('加载天气信息超时啦，请刷新重试~');
        }
      });
    }, function(err) {
      alert('无法获取你的位置，请检查浏览器定位权限');
    });
  } else {
    alert('你的浏览器不支持定位功能哦');
  }
});

function handleWeatherData(data) {
  // 更新温度和天气描述
  $('#temp').text(`${data.main.temp}°C`);
  $('#weather-desc').text(data.weather[0].description);
  
  // 预加载天气图片，避免页面空白
  const weatherIcon = new Image();
  weatherIcon.onload = function() {
    $('#weather-icon').attr('src', this.src);
  };
  weatherIcon.onerror = function() {
    // 图片加载失败时显示默认占位图
    $('#weather-icon').attr('src', 'https://via.placeholder.com/100?text=No+Icon');
  };
  weatherIcon.src = data.weather[0].icon;
}

3. 优化图片加载体验 #

天气图标加载慢的原因是API返回的图标URL多为外部资源，加载依赖第三方服务器。上面的代码里做了两个关键优化：

• 用图片预加载：先创建Image对象监听加载完成事件，确保图片加载好再插入DOM，避免页面出现破碎图或空白
• 加错误降级：如果图片加载失败，显示一个默认占位图，保证页面视觉完整性

4. 额外的小细节优化 #

• 原代码里的&是HTML转义字符，在JS里直接用&就行，避免URL拼接错误
• 可以给页面加个加载动画，比如请求数据时显示“加载中...”，请求完成后再隐藏，提升用户感知
• 考虑用localStorage缓存最近的天气数据，比如30分钟内不用重复请求API，减少不必要的网络请求

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