Mac/iOS非活跃标签中setInterval倒计时失效，多种方案尝试无果求助

问题回顾 #

需要实现25分钟（15000秒）的倒计时功能，但在Mac的Chrome非活跃标签页中，倒计时会逐渐变慢甚至完全停止。已尝试Web Worker、时间差值计算、HackTimer库等方案，均未解决问题。

问题根源 #

你当前的Worker代码仍依赖setInterval的间隔来递减倒计时数值，虽然加入了时间差值修正，但这种混合逻辑容易受定时器节流影响，同时主线程在非活跃标签中处理消息的延迟也会导致显示偏差。

修正方案 #

完全抛弃依赖setInterval间隔递减的逻辑，每次直接通过系统时间与结束时间的差值计算准确剩余时间，确保倒计时不受定时器节流影响。

修改后的worker.js代码

let timerId;

self.onmessage = function(evt) {
    // 无论启动还是停止，先清除现有定时器
    if (evt.data.command === 'start' || evt.data.command === 'stop') {
        clearInterval(timerId);
    }

    if (evt.data.command === "start") {
        // 缓存结束时间，避免重复读取事件数据
        const finishedAt = evt.data.finishedAt;

        timerId = setInterval(function() {
            // 获取当前时间（秒级）
            const currentSeconds = Math.floor(Date.now() / 1000);
            // 计算准确剩余时间
            let secondsLeft = finishedAt - currentSeconds;
            
            // 处理倒计时结束的边界情况
            if (secondsLeft < 0) {
                secondsLeft = 0;
                clearInterval(timerId);
            }

            // 发送最新剩余时间到主线程
            self.postMessage(secondsLeft);
        }, 1000);
    }
};

主进程调用代码无需修改

你当前的Worker调用逻辑是正确的，finishedAt基于系统时间计算，能保证时间基准的准确性。

额外说明 #

1. Web Worker的定时器不受标签活跃状态节流影响，计算出的剩余时间始终准确；
2. 若切回标签时UI才更新到正确数值，是因为Chrome对非活跃标签的主线程JS执行做了延迟处理，但倒计时的核心计算并未停止；
3. 倒计时结束时主动清除定时器，避免不必要的资源消耗。

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