JavaScript倒计时计时器存在显著延迟问题求助

问题概述 #

当前实现的倒计时计时器存在明显时间偏差：设置10分钟（var sec = 600）倒计时，真实时间经过10分钟后，计时器仍显示约01:10剩余；设置30分钟时，真实时间过30分钟后剩余约05:20，所有时长均存在类似延迟。

问题根源 #

原代码依赖setInterval每秒对sec变量减1更新倒计时，但setInterval的执行间隔并非绝对精确：JavaScript是单线程模型，当主线程被渲染任务、其他脚本执行等工作阻塞时，setInterval的回调会被推迟执行。每次推迟都会导致sec少减1，累积下来就会形成越来越大的时间差。

修复方案 #

正确的实现思路是基于真实时间戳计算剩余时长，而非依赖固定间隔的减时操作。通过预先计算倒计时的结束时间，每次更新时对比当前时间与结束时间的差值，确保显示的剩余时间始终与真实时间一致。

修改后的完整代码 #

HTML（无需修改）

<article class="clock" id="id1">
  <div class="count">
    <div id="timer"></div>
  </div>
</article>

CSS（无需修改）

article {
  width: 100px;
  text-align: center;
  background-color: #f1f1f1;
  border-radius: 10px;
  margin: 50px auto 20px;
  padding: 5px;
  overflow: hidden;
  box-shadow: 3px 3px 10px #ccc;
}

article h3 {
  padding: 10px;
  color: #fff;
}

article .count {
  padding: 5px;
}

article #timer {
  padding: 5px;
  color: crimson;
  border-radius: 2px;
}

JavaScript（核心修改）

// 设置倒计时总时长（单位：秒）
const totalSeconds = 600;
const countDiv = document.getElementById("timer");

// 计算倒计时结束时间：当前时间戳 + 总时长对应的毫秒数
const endTime = Date.now() + totalSeconds * 1000;

const countDown = setInterval(() => {
  'use strict';
  // 计算剩余毫秒数
  const remainingMs = endTime - Date.now();
  
  // 倒计时结束逻辑
  if (remainingMs <= 0) {
    clearInterval(countDown);
    countDiv.innerHTML = 'countdown done';
    return;
  }
  
  // 将剩余毫秒转换为秒，再拆分成分和秒
  const totalRemainingSec = Math.floor(remainingMs / 1000);
  const min = Math.floor(totalRemainingSec / 60);
  const remSec = totalRemainingSec % 60;
  
  // 格式化分秒为两位数字
  const formattedMin = min < 10 ? `0${min}` : min;
  const formattedSec = remSec < 10 ? `0${remSec}` : remSec;
  
  countDiv.innerHTML = `${formattedMin}:${formattedSec}`;
}, 1000);

关键修改说明 #

1. 基于时间戳计算：通过Date.now()获取当前真实时间，与预先计算的结束时间对比，直接得到剩余时长，彻底避免setInterval延迟带来的累计误差
2. 自动偏差纠正：即使某次setInterval回调被推迟，下一次执行时也会基于最新的真实时间重新计算剩余时长，自动修正显示
3. 代码风格优化：使用const声明常量，箭头函数简化回调写法，让代码更简洁易读

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