JavaScript中Async/Await控制加载遮罩显隐失效问题排查

你的问题出在两个关键地方：

1. CSS优先级冲突导致遮罩无法显示 #

你的.overlay样式里写了display: none!important，这个!important的优先级远高于JS通过style.display设置的样式，所以即使调用loadingOverlayOn()，遮罩也不会显示。

修复方案： #

去掉!important，改用类控制显隐（更灵活且避免优先级问题）：

.overlay {
  background-color:#EFEFEF;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  left: 0px;
  display: none;
}
/* 添加show类来显示遮罩，保持原有flex布局样式 */
.overlay.show {
  display: flex;
}

修改JS显隐函数为操作类名：

function loadingOverlayOn() {
  document.getElementsByClassName("overlay")[0].classList.add('show');
}
function loadingOverlayOff() {
  document.getElementsByClassName("overlay")[0].classList.remove('show');
}

2. runSearch未返回Promise导致await失效 #

await只能等待Promise对象，你的runSearch没有返回Promise，代码会直接跳过await，立刻执行loadingOverlayOff()，导致遮罩刚触发显示就被隐藏，视觉上完全看不到。

修复方案： #

让runSearch返回Promise，确保await能等待所有异步操作完成：

如果runSearch里用了fetch API，直接改成async函数（自动返回Promise）：

async function runSearch(cityName, cityState, cityCountry, cityLat, cityLng, units) {
  // 同步操作：DOM更新、localStorage操作
  // 等待API请求完成
  const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${cityLat}&lon=${cityLng}&units=${units}&appid=你的API密钥`);
  const weatherData = await response.json();
  
  // 处理返回的数据（DOM更新等）
  
  return weatherData; // 可选，返回结果供调用者使用
}

如果不用async语法，也可以手动封装Promise：

function runSearch(cityName, cityState, cityCountry, cityLat, cityLng, units) {
  return new Promise((resolve, reject) => {
    // 同步操作
    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${cityLat}&lon=${cityLng}&units=${units}&appid=你的API密钥`)
      .then(response => response.json())
      .then(data => {
        // 处理数据
        resolve(data);
      })
      .catch(error => {
        // 错误处理
        reject(error);
        loadingOverlayOff(); // 出错时也要隐藏遮罩
      });
  });
}

最终效果 #

修改后，点击按钮会先显示遮罩，等待runSearch里的所有异步操作（包括API请求）完成后，才隐藏遮罩，解决了遮罩不显示和页面元素提前加载的问题。

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