setTimeout失步后如何同步？页面失焦后定时回调执行间隔异常问题求助

问题根因 #

非活跃标签页的定时器调度被浏览器限制是默认的性能优化策略，所有setTimeout、setInterval的最小执行间隔会被调整为1000ms，且多个定时器会被合并调度，因此你设置的5000ms固定间隔会出现明显偏差。 #

方案1：时间戳动态校准（最轻量，无需额外API） #

不使用固定延迟，每次执行时通过时间差动态调整下一次的调度间隔，即使中间被浏览器节流，也能保证整体任务的平均执行间隔符合预期，适配原有逻辑的成本极低：

$(document).ready(function () {
    // 定义预期的间隔时长，单位ms
    const EXPECTED_INTERVAL = 5000;
    for (var key in keys) {
        element = key;
        val = keys[key];
        test(element, val);
        (function loop(element, val) {
            const lastRunTime = Date.now();
            setTimeout(function () {
                test(element, val);
                // 计算本次实际间隔，动态调整下一次的延迟时长
                const actualCost = Date.now() - lastRunTime;
                const nextDelay = Math.max(0, EXPECTED_INTERVAL - (actualCost - EXPECTED_INTERVAL));
                setTimeout(loop, nextDelay, element, val);
            }, EXPECTED_INTERVAL);
        })(element, val);
    }
});

方案2：Web Worker独立线程调度（精度最高） #

Web Worker运行在独立于页面主线程的后台线程，不受标签页活跃状态的影响，定时器调度精度完全正常，适合对定时精度要求极高的场景：

$(document).ready(function () {
    // 行内创建Worker，无需额外引入独立文件
    const workerBlob = new Blob([`
        // Worker内部定时器完全不受页面活跃状态影响
        setInterval(() => postMessage('tick'), 5000);
    `], { type: 'application/javascript' });
    const timerWorker = new Worker(URL.createObjectURL(workerBlob));

    for (var key in keys) {
        const element = key;
        const val = keys[key];
        test(element, val);
        // 监听Worker的定时信号执行业务逻辑
        timerWorker.addEventListener('message', () => {
            test(element, val);
        });
    }

    // 页面卸载时销毁Worker，避免内存泄漏
    window.addEventListener('beforeunload', () => {
        timerWorker.terminate();
    });
});

方案3：失焦暂停、对焦重启（性能最优） #

如果业务允许后台暂停执行定时任务，可以在页面失焦时清空所有定时器，重新获得焦点时再重启调度，比你当前用的页面刷新方案轻量很多，不会丢失页面当前的运行状态：

$(document).ready(function () {
    const EXPECTED_INTERVAL = 5000;
    // 存储所有定时器ID，方便统一清理
    const timerMap = {};

    // 启动定时器的通用方法
    function startLoop(element, val) {
        timerMap[element] = setTimeout(function loop() {
            test(element, val);
            timerMap[element] = setTimeout(loop, EXPECTED_INTERVAL);
        }, EXPECTED_INTERVAL);
    }

    // 初始化启动所有任务
    for (var key in keys) {
        const element = key;
        const val = keys[key];
        test(element, val);
        startLoop(element, val);
    }

    // 失焦时清空所有定时器
    $(window).blur(() => {
        for (const id in timerMap) {
            clearTimeout(timerMap[id]);
        }
    });

    // 重新获得焦点时重启所有定时器
    $(window).focus(() => {
        for (var key in keys) {
            startLoop(key, keys[key]);
        }
    });
});

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