前言

使用 AI 编程助手开发一个倒计时网页并不难。

例如，我们只需要输入：

“帮我做一个 60 秒倒计时，每秒更新一次数字，到 0 后自动停止。”

AI 很快就能生成代码，而且看起来完全正常。

但是，实际使用时可能出现一个问题：

倒计时运行一段时间后，显示的剩余时间和实际经过的时间不一致。

尤其是在切换浏览器标签页、电脑进入休眠或者网页主线程繁忙时，这种现象更容易出现。

为什么明明设置了每秒执行一次，倒计时却不一定准确？

本文从 JavaScript 的 setInterval 开始，介绍计时漂移的原因，并使用时间戳实现一个更可靠的倒计时工具。

一、最常见的倒计时写法

先看一段简单的 JavaScript 代码：

let remaining = 60;

const timer = setInterval(() => {
  remaining--;

  console.log(`剩余 ${remaining} 秒`);

  if (remaining <= 0) {
    clearInterval(timer);
    console.log("倒计时结束");
  }
}, 1000);

这段代码很容易理解。

每隔 1000 毫秒执行一次回调，然后将剩余秒数减一。

如果一切正常，60 次回调之后，倒计时就应该结束。

但问题在于：

setInterval(fn, 1000) 并不保证回调一定严格每隔 1000 毫秒执行。

它只是请求浏览器按照指定的时间间隔安排任务。

实际执行时间还会受到浏览器调度、主线程负载和后台节流策略等因素影响。

因此，不能把定时器的执行次数直接等同于真实经过的时间。

二、为什么 setInterval 会出现计时漂移？

JavaScript 在浏览器中执行时，定时器回调需要等待合适的执行时机。

假设我们设置：

setInterval(update, 1000);

理想情况下，回调时间分别是：

第 1 次：1.0 秒
第 2 次：2.0 秒
第 3 次：3.0 秒
第 4 次：4.0 秒

但是，实际执行可能是：

第 1 次：1.0 秒
第 2 次：2.1 秒
第 3 次：3.4 秒
第 4 次：4.5 秒

这些延迟可能来自几个方面。

第一，主线程繁忙。

如果网页正在执行大量计算，计时器回调就可能被延后。

第二，浏览器后台节流。

当用户切换到其他标签页时，浏览器可能降低后台定时器的执行频率，以减少资源消耗。

第三，设备休眠或系统调度。

电脑休眠期间，网页通常无法像前台运行时一样持续执行 JavaScript 回调。

如果倒计时采用“每执行一次就减一秒”的方式，回调延迟就可能使显示时间落后于真实时间。

三、解决思路：不要数回调次数，而要计算剩余时间

更可靠的思路是：

倒计时开始时，记录目标结束时间；每次更新界面时，重新计算距离结束还剩多少时间。

例如：

const duration = 60 * 1000;

const endTime = Date.now() + duration;

这里的 endTime 表示预计结束时刻。

然后通过下面的公式计算剩余时间：

const remaining = Math.max(
  0,
  endTime - Date.now()
);

假设浏览器因为某种原因延迟了 3 秒才执行回调。

此时计算出的剩余时间会直接反映这 3 秒已经过去，而不是只机械地减去 1 秒。

这样，定时器就不再负责决定时间如何流逝。

它只负责通知页面：

“现在应该重新更新显示了。”

这就是时间戳校准的核心思路。

四、完整实践：开发一个时间戳倒计时工具

下面使用原生 HTML、CSS 和 JavaScript，实现一个简单的 60 秒倒计时。

创建 index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">

  <title>时间戳倒计时演示</title>

  <style>
    body {
      max-width: 500px;
      margin: 60px auto;
      padding: 20px;
      font-family: system-ui, sans-serif;
      text-align: center;
    }

    #time {
      font-size: 64px;
      font-weight: bold;
      margin: 30px 0;
      font-variant-numeric: tabular-nums;
    }

    button {
      padding: 12px 24px;
      margin: 6px;
      cursor: pointer;
    }

    #status {
      color: #475569;
    }
  </style>
</head>

<body>
  <h1>时间戳倒计时</h1>

  <div id="time">01:00</div>

  <button id="start">开始</button>
  <button id="reset">重置</button>

  <p id="status" role="status">准备就绪</p>

  <script>
    const DURATION = 60 * 1000;

    const timeEl = document.getElementById("time");
    const statusEl = document.getElementById("status");

    let endTime = null;
    let timerId = null;

    function formatTime(ms) {
      const seconds = Math.ceil(ms / 1000);

      const minutes = Math.floor(seconds / 60);
      const rest = seconds % 60;

      return (
        String(minutes).padStart(2, "0") +
        ":" +
        String(rest).padStart(2, "0")
      );
    }

    function stopTimer() {
      if (timerId !== null) {
        clearInterval(timerId);
        timerId = null;
      }
    }

    function updateDisplay() {
      if (endTime === null) return;

      const remaining = Math.max(
        0,
        endTime - Date.now()
      );

      timeEl.textContent = formatTime(remaining);

      if (remaining === 0) {
        stopTimer();
        endTime = null;
        statusEl.textContent = "倒计时结束";
      }
    }

    function startTimer() {
      stopTimer();

      endTime = Date.now() + DURATION;

      statusEl.textContent = "计时中";

      updateDisplay();

      timerId = setInterval(updateDisplay, 200);
    }

    function resetTimer() {
      stopTimer();

      endTime = null;
      timeEl.textContent = formatTime(DURATION);
      statusEl.textContent = "已重置";
    }

    document.getElementById("start")
      .addEventListener("click", startTimer);

    document.getElementById("reset")
      .addEventListener("click", resetTimer);

    document.addEventListener(
      "visibilitychange",
      updateDisplay
    );
  </script>
</body>
</html>

直接使用浏览器打开即可运行。

这个示例没有使用第三方库，也不需要服务器。

与传统倒计时相比，它有三个比较重要的改进。

第一，每次启动都会重新设置结束时间。

第二，重复点击开始按钮不会产生多个同时运行的定时器。

第三，即使浏览器延迟执行回调，再次更新时也会根据当前时间重新计算剩余秒数。

这里使用 200 毫秒作为界面刷新检查间隔，并不代表倒计时精度是 200 毫秒。真正用于计算剩余时间的是时间戳差值。

五、为什么还要监听 visibilitychange？

浏览器提供了 Page Visibility API，用来判断网页是否处于可见状态。

例如：

document.addEventListener(
  "visibilitychange",
  () => {
    console.log(document.visibilityState);
  }
);

当用户切换标签页时，页面的可见状态可能发生变化。

如果网页处于后台，浏览器可能限制定时器的执行。

因此，我们可以在可见状态变化时主动更新一次倒计时：

document.addEventListener(
  "visibilitychange",
  updateDisplay
);

这样，当用户重新切回页面时，就不需要等待下一次定时器回调才刷新显示。

不过，visibilitychange 不是万能的。

如果网页已经被关闭或浏览器进程被终止，它不会让 JavaScript 继续运行。对于需要跨页面关闭恢复的计时器，还需要额外保存任务状态。

六、Date.now 和 performance.now 应该选哪个？

JavaScript 中有两个常见的计时 API：

Date.now()

以及：

performance.now()

它们的用途并不完全相同。

如果项目是“距离某个真实日期还有多少时间”，例如距离活动截止时间还有多久，那么使用绝对时间戳比较直观。

但是，如果系统时间被手动修改，Date.now() 的结果也可能突然改变。

对于测量程序执行耗时，可以考虑：

const start = performance.now();

// 执行某些操作

const elapsed = performance.now() - start;

这样能够避免系统时间调整直接影响耗时计算。

需要注意，不同浏览器和操作系统对设备休眠期间的高精度计时行为可能存在差异。

因此，不能简单认为 performance.now() 就能解决所有计时问题。

究竟选择哪种时间基准，应该根据产品需求决定。

七、如何验证倒计时是否真的准确？

只看倒计时数字是否正常变化，测试是不够的。

可以设计下面几个场景。

特别推荐测试后台标签页。

可以先启动 60 秒倒计时，然后切换到另一个标签页。

过一段时间再回来观察。

如果使用传统的“每次回调减一秒”方式，显示时间可能出现明显偏差。

而使用时间戳计算的方式，页面再次执行更新时会直接根据当前时间重新计算剩余时间。

不过，这不意味着计时结束的提示一定会准时弹出。

如果网页处于休眠、被冻结或浏览器已经关闭，JavaScript 仍然可能无法按预期时刻执行提醒动作。

计时数值的正确性与提醒触发的准时性，是两个不同的问题。

八、如果需要真正可靠的定时提醒怎么办？

对于普通网页番茄钟，时间戳倒计时通常已经能够明显改善体验。

但是，如果需要支持以下功能：

• 浏览器关闭后仍然提醒。

• 系统休眠期间到期通知。

• 多设备之间同步提醒。

• 长时间运行且要求稳定触发。

那么，仅使用浏览器中的 setInterval 就不够了。

这类需求通常需要考虑服务端任务调度、操作系统通知或专门的后台任务机制。

如果涉及多设备同步，还需要考虑服务器时间与客户端时间不一致的问题。

因此，AI 编程助手开发提醒工具时，必须明确区分：

普通界面倒计时与可靠的后台到期通知。

前者主要解决显示和时间计算问题，后者还需要解决任务持久化、调度和系统权限等问题。

九、如何给 AI 编程助手提出更准确的要求？

如果只告诉 AI：

“开发一个 60 秒倒计时。”

它可能直接使用 setInterval，每次回调减一秒。

为了避免这种情况，可以把需求改得更明确：

请实现基于目标时间戳的倒计时，而不是依赖 setInterval 回调次数累计时间。定时器仅用于更新界面，每次必须根据当前时间重新计算剩余时长。处理后台标签页、重复启动、重置和到期清理，并测试主线程延迟时的计时表现。

这段要求并不复杂，却能帮助 AI 从一开始就选择更可靠的实现方式。

对于需要正式交付的提醒系统，还应额外明确是否要求关闭页面后继续提醒，以及提醒允许多大的触发误差。

十、总结

setInterval 是一个非常实用的 JavaScript API，但它并不是精确时钟。

使用 AI 编程助手开发倒计时工具时，不能简单地将回调执行次数当作真实经过时间。

更稳妥的做法是：

1. 开始时记录目标结束时间。

2. 使用时间差计算剩余时长。

3. 让定时器只负责界面刷新。

4. 处理后台标签页恢复和重复启动。

5. 根据业务要求选择合适的时间基准。

6. 区分倒计时显示准确与提醒实际准时触发。

对于普通前端项目来说，这些改动并不复杂，但可以明显改善倒计时的可靠性。

真正可靠的计时逻辑，不应该问“定时器执行了多少次”，而应该问“距离目标时间究竟还剩多久”。