如何让JavaScript秒表/闹钟在切换窗口/标签页时持续运行

功能需求 #

基于修改后的WordPress插件实现网站端秒表/闹钟能力，核心逻辑如下：

• 启动秒表后，计时满15分钟自动播放警报声
• 警报响起后3分钟内未重置秒表，触发已开发完成的通知类后续动作
• 重置秒表后重新开始计时，需支持连续运行数小时

现存问题 #

基础架构已通过WordPress搭建完成，仅秒表后台运行逻辑存在异常：

• 页面首次加载后切换到其他标签页/程序时，秒表会直接暂停；偶尔运行时速度极慢，页面显示的1秒对应实际经过3秒
• 仅当警报声播放过一次、用户重置秒表后，再切换标签页秒表才能正常计数

原有问题代码 #

var silence = new Audio('exampleSilence.mp3');      //无内容的静音音频文件
var audio = new Audio('exampleAlarm.mp3');          //警报音频文件

var time=0;
var running=0;
function strtpause () {                            //开始/暂停按钮逻辑
    if(running==0){
        running=1;
        increment();
        document.getElementById("strtpause").innerHTML="Pause"
    }
    else{
        running=0;
        document.getElementById("strtpause").innerHTML="Resume"
        return;
    }
}
function reset(){   //重置秒表逻辑，原逻辑会暂停计时，已注释相关代码保持计时连续
    //running=0;
    time=0;                                                 //时间归零重新计时
    //document.getElementById("strtpause").innerHTML="Start"
    document.getElementById("output").innerHTML="00:00"
    audio.pause();                                          //停止警报播放
    audio.currentTime = 0;                                  //重置警报播放进度
}
function increment(){                                       //秒表计时核心逻辑
    if(running==1){
        setTimeout(function(){
            time++;
            var mins=Math.floor(time/60);
            var secs=Math.floor((time)-(mins*60));
            if(mins<10){
                mins="0"+mins;
            }
            if(secs<10){
                secs="0"+secs;
            }
            document.getElementById("output").innerHTML=mins+":"+secs;
            
            if(1<time<9){                           //尝试播放静音音频保持进程活跃，无效果
                silence.play();                      
            }
            if(1<time<9){                           //尝试极低音量播放音频，有效果但计时变慢
                audio.volume = 0.001;               
                audio.play();
            }
            if (time>10){                          //计时到阈值后播放警报
                audio.volume = 0.5;                
                audio.play();
            }
            increment();
        },1000);            
    }
}

已尝试的无效方案 #

• 调整setTimeout的时间间隔：无效果，设置更小的间隔反而会让计时更慢
• 后台播放无实际内容的静音音频文件保活：无效果
• 等待阶段以极低音量（volume=0.001）播放音频文件：有一定效果但计时严重失准，显示1秒对应实际3秒

修复方案 #

问题根因 #

所有主流浏览器都会对后台未激活的标签页做性能限流：setTimeout/setInterval的最小触发间隔会被拉长到1000ms以上，极端情况下甚至会达到数秒一次；原有代码靠「定时器每触发一次计数+1」的逻辑实现计时，一旦定时器被限流，计数速度自然会远慢于真实时间。另外原代码中1<time<9属于JS语法逻辑错误，会导致计时初期反复触发音频播放，额外占用线程资源拖慢速度。

核心修改点 #

• 废弃计数累加逻辑，改用时间戳差值计算真实耗时：启动/重置秒表时记录当前系统时间戳，每次定时器触发时直接计算当前时间与起始时间的差值得到真实经过的秒数，哪怕定时器被限流，只要触发一次就能校准到正确时间，从根本上解决计时不准的问题
• 利用用户点击交互的时机解锁音频权限，用内联生成的静音音频循环播放实现保活，不需要额外上传静音文件，也不会产生实际声音，能让浏览器将页面标记为活跃媒体页面，降低定时器限流等级
• 修复原有逻辑bug，移除多余的重复音频播放代码

修复后可直接使用的代码 #

直接替换原有JS代码即可，不需要新增其他文件，兼容所有主流浏览器：

// 警报音频，保留原有配置
var audio = new Audio('exampleAlarm.mp3');
// 内联生成静音音频，不需要额外文件，用于保活+解锁音频权限
var silence = new Audio('data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA');
silence.loop = true;
silence.volume = 0;

var startTime = 0; // 记录秒表启动的时间戳
var running = 0;
var timer = null; // 定时器句柄，避免重复创建
const ALARM_THRESHOLD = 15 * 60; // 15分钟警报阈值，单位秒
const FOLLOWUP_THRESHOLD = 18 * 60; // 18分钟触发后续动作（警报后3分钟）

function strtpause() {
    if(running == 0) {
        running = 1;
        // 记录起始时间，暂停后恢复自动接续之前的时长
        startTime = startTime ? Date.now() - (Math.floor((Date.now() - startTime)/1000)*1000) : Date.now();
        // 用户点击交互时播放静音音频，符合浏览器自动播放政策
        silence.play().catch(()=>{});
        increment();
        document.getElementById("strtpause").innerHTML = "Pause";
    } else {
        running = 0;
        silence.pause();
        clearTimeout(timer);
        document.getElementById("strtpause").innerHTML = "Resume";
    }
}

function reset() {
    // 重置起始时间为当前时间，连续运行不暂停
    startTime = Date.now();
    document.getElementById("output").innerHTML = "00:00";
    // 停止警报
    audio.pause();
    audio.currentTime = 0;
}

function increment() {
    if(running != 1) return;
    // 计算真实经过的秒数，不依赖定时器触发次数
    var elapsed = Math.floor((Date.now() - startTime) / 1000);
    var mins = Math.floor(elapsed / 60);
    var secs = elapsed % 60;
    // 补零格式化
    mins = mins < 10 ? "0" + mins : mins;
    secs = secs < 10 ? "0" + secs : secs;
    document.getElementById("output").innerHTML = mins + ":" + secs;

    // 到15分钟播放警报
    if(elapsed == ALARM_THRESHOLD) {
        audio.volume = 0.5;
        audio.play().catch(()=>{});
    }
    // 到18分钟触发已实现的后续通知逻辑，可直接替换为原有业务代码
    if(elapsed == FOLLOWUP_THRESHOLD) {
        // 此处放置已实现的通知等后续动作代码
    }

    // 200ms触发一次校准，哪怕被限流也不会有明显误差
    timer = setTimeout(increment, 200);
}

方案说明 #

• 计时完全基于系统时间戳，哪怕切后台后定时器被限到几秒触发一次，时间显示也会直接跳到真实值，不会出现走慢、暂停的问题
• 静音音频在用户主动点击开始/恢复按钮时触发，完全符合浏览器的自动播放政策，不会被拦截，循环播放无声音，能最大程度降低后台标签页的限流等级
• 不需要新增任何外部文件，所有逻辑都在原有JS代码中实现，适配WordPress插件的嵌入场景

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