如何在JavaScript长耗时操作中可靠切换等待光标？

核心问题分析 #

你的两个方案失效的根本原因是UI线程被同步长耗时任务阻塞，浏览器没有机会更新光标样式：

• lengthy1：setTimeout(0) 依赖浏览器宏任务调度，不同环境下可能在UI渲染前就执行任务，导致光标样式来不及更新；增加延迟能提高概率，但本质是碰运气。
• lengthy2：Promise的执行器（executor）是同步执行的，添加waiting类后立即调用func()，阻塞UI线程，浏览器完全没机会渲染等待样式，任务结束后又立刻移除类，用户看不到任何变化。

最优实现方案 #

要确保光标样式先更新，再执行长耗时任务，需要让浏览器先完成UI渲染，再执行任务。以下是可靠的包装函数实现：

同步任务版本

function wrapLongTask(task) {
  // 开启等待状态
  document.body.classList.add('waiting');
  document.getElementById('notice').innerText = 'waiting';

  // 确保浏览器完成UI渲染后再执行任务
  requestAnimationFrame(() => {
    setTimeout(() => {
      try {
        task(); // 执行长耗时同步任务
      } finally {
        // 无论任务成功/失败，都恢复状态
        document.body.classList.remove('waiting');
        document.getElementById('notice').innerText = 'done';
      }
    }, 0);
  });
}

兼容异步任务版本

如果你的任务包含异步操作（比如API请求、Promise），可以用async/await版本：

async function wrapLongTask(task) {
  document.body.classList.add('waiting');
  document.getElementById('notice').innerText = 'waiting';

  // 等待浏览器完成一次UI渲染
  await new Promise(resolve => requestAnimationFrame(resolve));

  try {
    await task(); // 等待异步任务完成
  } catch (error) {
    // 可选：处理任务执行错误
    console.error('任务执行失败:', error);
  } finally {
    document.body.classList.remove('waiting');
    document.getElementById('notice').innerText = 'done';
  }
}

调用方式 #

直接将你的长任务传入包装函数即可：

function butt3() {
  wrapLongTask(LongAction);
}

为什么这个方案可靠 #

1. requestAnimationFrame 确保回调在浏览器下一次重绘前执行，此时DOM的变更（添加waiting类）已经准备好渲染。
2. 嵌套的setTimeout(0) 将任务放到下一个宏任务队列，让浏览器先完成重绘（光标变成等待样式），再执行长耗时任务。
3. try/finally 保证无论任务成功还是抛出错误，光标样式都会被恢复，避免页面一直处于等待状态。

样式优化（可选） #

原CSS已经覆盖了所有元素的光标，但可以简化为直接给body设置光标，避免!important：

body.waiting {
  cursor: wait;
}

如果某些元素有自定义光标，再针对性覆盖：

body.waiting .custom-cursor-element {
  cursor: wait !important;
}

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