为什么 setTimeout 不准时

setTimeout 是 JavaScript 中用于延迟执行代码的定时器函数，但由于 JavaScript 的单线程特性、事件循环机制以及浏览器的一些限制，setTimeout 的定时并不总是准确的。以下是 setTimeout 不准时的主要原因：

1. 单线程和事件循环

JavaScript 是单线程的，所有任务都在主线程上执行。setTimeout 的回调函数会被放入任务队列中，等待主线程上的同步任务执行完毕后才会执行。如果主线程上有长时间运行的同步任务（如复杂计算、DOM 操作等），setTimeout 的回调函数会被延迟执行。

console.log('开始');
setTimeout(() => console.log('setTimeout'), 0);

// 模拟长时间运行的同步任务
for (let i = 0; i < 1e9; i++) {} // 阻塞主线程

console.log('结束');

// 开始
// 结束
// setTimeout

由于同步任务阻塞了主线程，setTimeout 的回调函数被延迟执行。

2. 最小延迟时间

浏览器对 setTimeout 的最小延迟时间有限制：

• 在大多数浏览器中，setTimeout 的最小延迟时间为 4ms。即使设置为 0ms，实际延迟也会至少为 4ms。

console.log('开始');
setTimeout(() => console.log('setTimeout'), 0);
console.log('结束');

// 开始
// 结束
// setTimeout

即使 setTimeout 的延迟时间设置为 0ms，实际执行时也会有至少 4ms 的延迟。

3. 页面处于后台

如果页面处于后台（如用户切换到其他标签页），浏览器可能会降低定时器的执行频率以节省资源。这种情况下，setTimeout 的延迟时间可能会被延长。

4. 系统负载

如果系统负载较高（如 CPU 占用率过高），定时器的执行可能会被延迟。浏览器可能会优先处理其他更重要的任务，导致 setTimeout 的回调函数被推迟执行。

5. 嵌套 setTimeout

如果 setTimeout 的回调函数中又调用了 setTimeout，浏览器会对嵌套的 setTimeout 进行限制，通常最小延迟时间为 4ms。

function nestedTimeout() {
    setTimeout(() => {
        console.log('嵌套 setTimeout');
        nestedTimeout();
    }, 0);
}

nestedTimeout();

// 嵌套 setTimeout
// 嵌套 setTimeout
// 嵌套 setTimeout
// ...

每次调用的实际延迟时间至少为 4ms。

6. 浏览器优化

现代浏览器会对 setTimeout 进行优化，以减少不必要的资源消耗。例如：

• 如果页面处于后台，浏览器可能会降低定时器的执行频率。

• 如果多个 setTimeout 的回调函数在同一时间触发，浏览器可能会将它们合并执行。

7. 总结

setTimeout 不准时的原因主要包括：

1. 单线程和事件循环：主线程上的同步任务会阻塞 setTimeout 的执行。

2. 最小延迟时间：浏览器对 setTimeout 的最小延迟时间有限制（通常为 4ms）。

3. 页面处于后台：浏览器可能会降低定时器的执行频率以节省资源。

4. 系统负载：高系统负载可能导致定时器延迟执行。

5. 嵌套 setTimeout：嵌套的 setTimeout 会受到最小延迟时间的限制。

6. 浏览器优化：浏览器可能会对 setTimeout 进行优化，导致定时不准确。

通过理解这些原因，可以更好地使用 setTimeout，并在需要高精度定时的场景中选择更合适的解决方案（如 requestAnimationFrame 或 Web Worker）。