求助：JavaScript中setInterval未触发，AI思考状态指示器失效

问题场景 #

开发AI对战游戏时，机器人决策过程耗时超10秒且全程占用CPU，尝试通过setInterval触发“思考中”状态指示器，但showThinking函数始终未执行。简化代码如下：

function showThinking() {
    // 实现加载动画等状态提示逻辑
}

async function getBotChoices() {
    // 包含大量CPU密集型计算及递归await调用
    return stuff;
}

async function getBest() {
    // 调用AI获取决策选项数组
    evalTimer = setInterval(showThinking, 1000);
    var choices = await getBotChoices();
    clearInterval(evalTimer);
}

问题根源 #

核心原因是JavaScript的事件循环机制以及*微任务队列（microqueue）与宏任务队列（macroqueue）*的优先级差异：

• setInterval的回调属于宏任务，会被加入宏任务队列等待主线程空闲时执行；
• getBotChoices虽标记为async，但内部大量同步CPU密集计算（或递归调用中无真正让出线程的await）会持续占用主线程，阻塞事件循环，导致宏任务队列中的showThinking回调无法得到执行时机；
• 即便存在await，若其后续是已完成的Promise，相关逻辑会进入微任务队列，微任务优先级高于宏任务，主线程仍会被CPU密集任务占据。

方案对比 #

1. 侵入式粗糙方案：在getBotChoices的计算循环/递归中加入计数器，每n次计算手动更新DOM状态。此方案需修改AI核心逻辑，耦合度高，且更新频率难以精准控制。

2. 最优方案：Web Worker分离计算任务
   将机器人决策的CPU密集逻辑迁移至Web Worker：

   • Web Worker运行在独立线程，不会阻塞主线程事件循环；
   • 主线程启动Worker后可立即触发“思考中”状态；
   • Worker完成计算后，通过postMessage将结果传回主线程，主线程再关闭指示器并处理决策结果。

该方案既能保证UI响应性，又不影响AI计算效率，是解决此类CPU密集任务与UI交互冲突的标准方案。

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