如何确保setTimeout在事件循环调用栈繁忙时按时执行？

在JavaScript的单线程事件循环机制下，setTimeout这类宏任务的回调必须等调用栈中的同步任务全部执行完毕才会被处理。如果同步任务（比如示例里的超大for循环）执行时长超过了定时器的超时时间，回调就会被延迟到同步任务结束后才能运行。要解决这个问题，有两种可行的思路：

方案一：拆分长同步任务为小批次执行 #

把耗时的长任务拆分成多个小任务，每次执行一小段后就主动让出主线程，让事件循环有机会处理定时器回调。

示例代码改造如下：

console.log("start")

setTimeout(()=>{
    console.log("do some timeout stuff")
},1000)

// 分批处理长循环，每批执行100000次后让出线程
function processBatch(start, end, batchSize) {
    for (let i = start; i < end && i < start + batchSize; i++) {
        // 原循环内的逻辑
    }
    // 如果还有未处理的部分，将下一批次放入宏任务队列
    if (end > start + batchSize) {
        setTimeout(() => {
            processBatch(start + batchSize, end, batchSize)
        }, 0)
    } else {
        console.log("end")
    }
}

// 启动分批处理
processBatch(1, 10000000000, 100000)

这种方式通过把大循环拆成多个小任务，让主线程在每个批次结束后有机会处理事件队列中的定时器回调，从而保证setTimeout能在指定的1秒后执行。

方案二：使用Web Workers移走长任务 #

Web Workers允许在独立的后台线程中执行脚本，不会阻塞主线程的事件循环。把耗时的长任务放到Worker中执行，主线程就能正常处理定时器回调。

主线程代码： #

console.log("start")

setTimeout(()=>{
    console.log("do some timeout stuff")
},1000)

// 创建Web Worker实例
const worker = new Worker('long-task-worker.js');

// 向Worker发送任务参数
worker.postMessage({ start: 1, end: 10000000000 });

// 监听Worker完成任务的通知
worker.onmessage = () => {
    console.log("end")
};

long-task-worker.js（单独的Worker文件）： #

self.onmessage = (e) => {
    const { start, end } = e.data;
    for(let i = start; i < end; i++){
        // 原循环内的耗时逻辑
    }
    // 任务完成后通知主线程
    self.postMessage('completed');
};

这种方式彻底将长任务与主线程分离，主线程的事件循环不受阻塞，setTimeout的回调可以精准在1秒后执行。

原代码问题根源 #

JavaScript是单线程模型，调用栈中的同步任务会优先执行，直到调用栈清空后，事件循环才会去处理宏任务队列中的setTimeout回调。因此原代码中的大循环会一直占据调用栈，导致定时器回调被延迟。

内容的提问来源于stack exchange，提问作者Mehmet Emre Topdal