如何实现网站计时器在所有客户端的状态同步

你当前的计时器逻辑完全运行在用户本地浏览器中，初始倒计时值写死为25秒，每个用户访问页面时都会在本地独立初始化计时状态，自然无法跨设备同步。要实现多端显示一致的倒计时，必须以服务端的时间/状态作为统一基准。

方案1：固定结束时间戳实现（最简易，适合固定周期循环的倒计时场景） #

这种方案不需要长连接，仅需要服务端给所有访问的客户端返回同一个倒计时结束的毫秒级Unix时间戳即可，所有客户端都基于这个统一的结束时间计算剩余时长，就能保证多端显示一致。
修改后的前端代码参考：

// 实际使用时请替换为调用你自己的服务端接口获取统一的结束时间戳
let endTimestamp;
// 示例服务端请求逻辑：
// fetch('/api/get-timer-end')
//   .then(res => res.json())
//   .then(data => {
//     endTimestamp = data.endTimestamp;
//     timerr();
//   });

function timerr() {
    let counter;

    function timer() {
        const current = Date.now();
        const count = endTimestamp - current;
        if (count <= 0) {
            clearInterval(counter); 
            // 如果是循环倒计时，此处可重新请求服务端获取下一轮的结束时间戳
            return;
        }
        displayCount(count);
    }

    function displayCount(count) {
        const res = count / 1000;
        if (res < 0.1){
            document.getElementById("timer").innerHTML = "";
        } else {
            const tiempo = res.toPrecision(count.toString().length);
            const tiempo_corto = tiempo.slice(0,-1);
            document.getElementById("timer").innerHTML = tiempo_corto;
        }
    }

    clearInterval(counter);
    counter = setInterval(timer, 10);
}

方案2：WebSocket实时同步（适合需要人工控制暂停/重置的动态倒计时场景） #

如果你的倒计时会被人工操作修改状态，不是固定周期运行，可采用WebSocket方案：

• 服务端维护倒计时的当前状态，所有用户打开页面时都和服务端建立WebSocket连接
• 服务端每次倒计时状态变更时，主动向所有连接的客户端推送最新的结束时间戳
• 客户端收到推送后直接更新本地计时逻辑即可，状态同步误差可控制在百毫秒内

注意事项 #

• 不要完全依赖本地时间做计时基准，用户可手动修改本地时间导致显示异常，所有计时的基准值必须从服务端获取
• 如果倒计时周期大于1分钟，可将刷新间隔从10ms改为1000ms，降低性能消耗

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