调用jQuery的show()显示加载圈仅在开启调试器时可见问题求助

• 浏览器JS执行与页面渲染共享主线程：调用$("#load").show()后，DOM显示操作会被加入渲染队列，若后续立刻执行同步计算、同步接口请求、批量DOM操作等阻塞型任务，主线程会优先完成所有JS任务再处理渲染队列。如果阻塞任务结束后直接触发加载圈隐藏逻辑，浏览器会合并两次DOM变更的渲染操作，最终加载圈不会被渲染到页面。
• 浏览器渲染合并优化：默认会对短时间内的多次DOM变更做合并，减少重绘重排开销。打开调试器时，会因窗口尺寸变化、调试工具的DOM监听逻辑打破合并规则，强制渲染最新的DOM状态，所以此时能看到加载圈显示。

方案1：将阻塞逻辑改为异步执行 #

使用setTimeout把后续阻塞逻辑放到下一轮事件循环执行，给浏览器留出渲染加载圈的时间：

$("#load").show();
setTimeout(() => {
  // 此处放置原本的阻塞逻辑：命令处理、计算、业务逻辑等
  // 逻辑执行完成后隐藏加载圈
  $("#load").hide();
}, 0);

setTimeout设置延迟为0时，不会立刻执行回调，而是等待当前主线程的渲染操作完成后再执行，保证加载圈优先渲染显示。

方案2：替换同步AJAX为异步模式 #

如果阻塞是由同步AJAX（手动设置async: false）导致的，改为异步请求，加载圈隐藏逻辑放到请求回调中：

$("#load").show();
$.ajax({
  url: "你的业务接口地址",
  async: true, // 保持默认异步配置即可，不要设为false
  success: (res) => {
    // 处理接口返回结果
  },
  complete: () => {
    // 请求完成后统一隐藏加载圈
    $("#load").hide();
  }
});

方案3：强制触发重排 #

对于需要保留同步逻辑的场景，在加载圈显示后主动读取一次DOM布局属性，迫使浏览器立刻执行渲染队列的操作：

$("#load").show();
// 读取offsetHeight属性强制触发重排，让加载圈立刻渲染
void $("#load")[0].offsetHeight;
// 后续执行你的同步阻塞逻辑
// ...
$("#load").hide();

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