如何在JavaScript脚本运行期间将全局光标设置为wait等待状态

根本原因 #

你遇到的两个问题分别对应两个底层逻辑：

• 直接修改body样式的方案，会被页面子元素自带的cursor样式覆盖，比如<input>的text光标、<a>标签的pointer光标
• 直接同步执行「加类→长任务→删类」的代码时，浏览器主线程被JS运算占用，不会触发样式重绘，因此wait样式根本没有机会渲染到页面上，等长任务执行完已经直接删类，自然看不到效果

操作步骤 #

1. 先添加全局CSS规则 #

html.wait, html.wait * {
  cursor: wait !important;
}

该规则会强制页面所有元素（包括表单、链接等）的光标都统一为wait样式，不会被元素自带样式覆盖。

2. 调整JS执行逻辑 #

需要让出主线程给浏览器完成重绘后，再执行长任务，推荐用setTimeout实现：

// 先添加wait类
document.documentElement.classList.add('wait');

// 让出线程，等待浏览器完成光标样式重绘后再执行长任务
setTimeout(() => {
  try {
    // 这里放你的长耗时JS逻辑
    // long scripting here
  } finally {
    // 无论长任务是否报错，都要移除wait类，避免光标卡死
    document.documentElement.classList.remove('wait');
  }
}, 16); // 16ms对应常规屏幕的一帧时长，保证重绘完成

如果你的长任务是异步逻辑（比如接口请求、文件读写等），不需要套setTimeout，直接在异步操作前后加删类即可：

async function longAsyncTask() {
  document.documentElement.classList.add('wait');
  try {
    // 示例：等待接口请求完成
    await fetch('/api/long-task');
  } finally {
    document.documentElement.classList.remove('wait');
  }
}

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