如何实现跨浏览器一致的JS定时器？Sleep循环可行吗？

我正在尝试实现一个跨浏览器表现一致的定时器，但网站部分用户反馈，该定时器在不同浏览器中的倒计时速度差异明显——Chrome能实时运行，而Safari和Firefox的倒计时速度慢很多。以下是处理定时器的代码：

async function countDown(){
    if(!gameIsRunning)
        return;

    if(timeRemaining <= 0){
        gameOver();
        return;
    }

    // Immediately Set timeout for next countdown step
    setTimeout(() => {
        countDown();
        // console.log(timeRemaining)
    }, COUNTDOWN_STEP);

    // Apply countdown
    timeRemaining -= COUNTDOWN_STEP;
    updateTimeBar();
}

该函数通过setTimeout递归调用自身。请问是否有办法实现跨浏览器一致性？使用每10ms休眠一次的循环会更稳定吗？

问题分析 #

你当前的实现存在核心问题：固定步长更新剩余时间，忽略了setTimeout的实际执行延迟。不同浏览器对定时器的节流策略不同——比如Chrome在前台标签下定时器精度较高，而Safari、Firefox在某些场景（甚至前台）会对setTimeout施加更严格的延迟限制，加上事件循环的排队延迟，实际两次执行的间隔会远大于你设置的COUNTDOWN_STEP。但你每次都固定减去COUNTDOWN_STEP，累计下来就会导致剩余时间和真实时间严重脱节，表现为倒计时变慢。

解决方案：基于真实时间差的更新机制 #

要实现跨浏览器一致的定时器，核心是根据真实流逝的时间计算剩余时间，而非依赖固定步长。推荐使用requestAnimationFrame代替setTimeout，它和浏览器重绘周期同步，跨浏览器表现更稳定，且不会被过度节流。

修改后的代码示例 #

let lastUpdateTime;

function countDown(currentTimestamp) {
    if (!gameIsRunning) return;

    if (timeRemaining <= 0) {
        gameOver();
        return;
    }

    // 初始化上一次更新的时间戳
    if (!lastUpdateTime) lastUpdateTime = currentTimestamp;
    // 计算从上一次更新到现在的真实流逝时间
    const elapsedTime = currentTimestamp - lastUpdateTime;

    // 更新剩余时间，避免出现负数
    timeRemaining = Math.max(timeRemaining - elapsedTime, 0);
    updateTimeBar();

    lastUpdateTime = currentTimestamp;
    // 继续请求下一帧，保持循环
    requestAnimationFrame(countDown);
}

// 启动定时器
requestAnimationFrame(countDown);

为什么这个方案有效 #

• requestAnimationFrame的一致性：它会在浏览器每次重绘前触发（通常是60fps，间隔约16.67ms），不同浏览器对它的执行时机控制更统一，不会像setTimeout那样出现大幅延迟。
• 基于时间戳的计算：每次通过当前时间戳和上一次的时间差，计算真实流逝的时间，不管执行间隔有多少波动，剩余时间始终和真实时间同步，从根源上避免了累计误差。

关于“每10ms休眠循环”的疑问 #

这种方案完全不可行。JavaScript是单线程模型，同步的while循环会阻塞事件循环，导致页面卡顿、交互失效；而基于await sleep(10)的异步循环本质还是依赖setTimeout，同样会遇到和原代码一样的精度问题，甚至因为阻塞其他任务，导致定时器延迟更严重。

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