setTimeout 定时器不准咋办

setTimeout 是 JavaScript 中用于延迟执行代码的定时器函数，但由于 JavaScript 的单线程特性以及事件循环机制，setTimeout 的定时并不总是准确的。

1. setTimeout 不准时的原因

(1) 单线程和事件循环

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

(2) 最小延迟时间

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

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

(3) 页面处于后台

如果页面处于后台（如用户切换到其他标签页），浏览器可能会降低定时器的执行频率以节省资源。

(4) 系统负载

如果系统负载较高（如 CPU 占用率过高），定时器的执行可能会被延迟。

2. 解决 setTimeout 不准时的方法

(1) 使用 performance.now() 校准时间

通过 performance.now() 获取高精度时间戳，动态调整定时器的延迟时间。

let startTime = performance.now();

function checkTimeout() {
    const currentTime = performance.now();
    const elapsedTime = currentTime - startTime;

    if (elapsedTime >= 1000) {
        console.log('1秒已到');
    } else {
        const remainingTime = 1000 - elapsedTime;
        setTimeout(checkTimeout, remainingTime);
    }
}

setTimeout(checkTimeout, 1000);

(2) 使用 requestAnimationFrame

requestAnimationFrame 是浏览器提供的用于动画的 API，它会根据浏览器的刷新率（通常为 60Hz，即每 16.67ms 一次）调用回调函数。可以结合 performance.now() 实现更精确的定时。

let startTime = performance.now();

function checkTimeout() {
    const currentTime = performance.now();
    const elapsedTime = currentTime - startTime;

    if (elapsedTime >= 1000) {
        console.log('1秒已到');
    } else {
        requestAnimationFrame(checkTimeout);
    }
}

requestAnimationFrame(checkTimeout);

(3) 使用 Web Worker

将耗时任务放到 Web Worker 中执行，避免阻塞主线程，从而保证 setTimeout 的准确性。

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('start');

worker.onmessage = (e) => {
    console.log('Worker 完成任务:', e.data);
};

// worker.js
self.onmessage = () => {
    setTimeout(() => {
        self.postMessage('完成');
    }, 1000);
};

(4) 使用 setInterval 动态调整

通过 setInterval 定期检查时间差，动态调整定时器的执行。

let startTime = performance.now();

const interval = setInterval(() => {
    const currentTime = performance.now();
    const elapsedTime = currentTime - startTime;

    if (elapsedTime >= 1000) {
        console.log('1秒已到');
        clearInterval(interval);
    }
}, 10); // 每 10ms 检查一次

(5) 使用 Promise 和 async/await

通过 Promise 和 async/await 实现更灵活的定时控制。

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
    const startTime = performance.now();
    await delay(1000);
    const endTime = performance.now();
    console.log('实际延迟:', endTime - startTime, 'ms');
}

run();

3. 总结

方法	适用场景	优点	缺点
performance.now()	需要高精度定时	精确控制延迟时间	需要手动实现逻辑
requestAnimationFrame	动画或高频定时任务	与浏览器刷新率同步，性能优化	不适合低频定时任务
Web Worker	避免主线程阻塞	不阻塞主线程，定时更准确	需要额外线程，复杂度较高
setInterval 动态调整	需要定期检查的任务	简单易用	可能不够精确
Promise 和 async/await	需要灵活控制的任务	代码简洁，易于理解	依赖 setTimeout，可能仍有延迟

通过以上方法，可以有效解决 setTimeout 定时器不准时的问题，提升代码的准确性和性能。