如何从零构建一个可控的小时级JavaScript计时器？

在Web开发中，经常会遇到需要统计用户持续操作时长、控制活动倒计时或者做工时记录的需求。这类需求往往要求计时器能够稳定运行数小时，并且中途可以被暂停和恢复。如果只靠简单的每秒加一，不仅会因为浏览器后台节流产生明显误差，还会在暂停逻辑上留下不少隐患。因此我们需要从时间基准和回调机制两个层面重新设计。

为什么普通计时器不适合小时级场景

JavaScript本身是单线程语言，计时器函数setInterval并不是精确时钟，而是将回调放入任务队列等待执行。当页面被切到后台或者主线程被复杂计算占用时，浏览器会对setInterval进行节流，最小间隔可能被拉大到一秒甚至数秒。对于分钟级倒计时尚可接受，但连续运行几个小时，累积偏差可能达到几分钟。

另一个常见误区是用一个变量不断自增来代表经过的秒数。一旦回调被延迟，自增次数变少，显示时间就会慢于真实时间。正确的做法是以时间戳为基准：在启动那一刻记录Date.now()，之后无论回调何时触发，都用当前时间减去启动时间算出已用时长。这样即使某次回调晚到了，计算结果依然准确。

事件循环与计时漂移

事件循环每轮先执行宏任务再渲染，setInterval的回调属于宏任务。假设我们设置间隔1000毫秒，但某次任务队列前面排了一个耗时800毫秒的脚本，那么这次回调实际会在1800毫秒后才跑。浏览器并不会为了补回失去的时间而连续触发两次，于是时间就悄悄变慢了。

下面的代码展示了单纯自增方式在后台节流下的脆弱性。我们在控制台打印理论次数和真实时间差，能明显看到不一致。

let count = 0;
let start = Date.now();
setInterval(function () {
  count++;
  let realElapsed = Date.now() - start;
  // 理想情况 realElapsed 约等于 count * 1000
  console.log('自增次数:', count, '真实流逝毫秒:', realElapsed);
}, 1000);

可控式计时器的核心设计

一个可控的计时器应该具备三个能力：启动、暂停、恢复。暂停时要保存已经走过的时间，恢复时不能把暂停期间算进去。为此我们维护两个变量：baseTime代表累计已运行毫秒数，running标记是否处于运行状态，lastStart记录本次运行的起点。

每次获取当前已用时间，若正在运行则返回baseTime + (Date.now() - lastStart)，否则直接返回baseTime。定时器回调里不再自增，而是用这个计算值去更新界面。这样即便回调被节流，显示依然准确。

混合更新策略

为了兼顾流畅显示和低频计算，我们可以用setInterval做每秒一次的逻辑校验，同时用requestAnimationFrame在页面前台时做平滑动画。当页面隐藏时rAF自动停止，setInterval虽被节流但依旧能靠时间戳纠偏。恢复显示后rAF重新接管，不会出现跳变。

以下为完整实现，包含开始、暂停、恢复与获取小时级格式字符串的方法。

function ControlledTimer() {
  this.baseTime = 0;
  this.lastStart = 0;
  this.running = false;
  this.timerId = null;
}

ControlledTimer.prototype.start = function () {
  if (this.running) return;
  this.running = true;
  this.lastStart = Date.now();
  let self = this;
  // 每秒校验一次，防止长期漂移
  this.timerId = setInterval(function () {
    self.render();
  }, 1000);
  this.render();
};

ControlledTimer.prototype.pause = function () {
  if (!this.running) return;
  this.baseTime += Date.now() - this.lastStart;
  this.running = false;
  clearInterval(this.timerId);
  this.timerId = null;
  this.render();
};

ControlledTimer.prototype.getElapsed = function () {
  if (this.running) {
    return this.baseTime + (Date.now() - this.lastStart);
  }
  return this.baseTime;
};

ControlledTimer.prototype.format = function () {
  let ms = this.getElapsed();
  let totalSec = Math.floor(ms / 1000);
  let hours = Math.floor(totalSec / 3600);
  let minutes = Math.floor((totalSec % 3600) / 60);
  let seconds = totalSec % 60;
  return hours + '时' + minutes + '分' + seconds + '秒';
};

ControlledTimer.prototype.render = function () {
  // 实际项目中可更新DOM，这里用控制台演示
  console.log('当前计时:', this.format());
};

// 使用示例
var t = new ControlledTimer();
t.start();
// 运行一段时间后调用 t.pause() 可暂停
// 再次调用 t.start() 会从上次暂停点继续

方案对比与注意事项

我们将纯setInterval自增方案与上述时间戳方案在后台挂起十分钟后对比：自增方案通常少计几十秒到几分钟，而时间戳方案误差在毫秒级。对于工时统计、考试计时等严肃场景，后者的可靠性显然更高。

需要注意，Date.now()依赖系统时钟，如果用户手动修改了设备时间，计算结果会突变。若部署在受控环境可忽略；若面向公网用户，可改用performance.now()，它不受系统时间调整影响，只记录页面打开后的相对毫秒数，更适合纯前端计时。

用performance.now优化

把上文的Date.now()替换为performance.now()即可获得更稳的时间源。由于performance.now()在页面卸载后归零，不适合跨刷新持久化，但配合localStorage记录关闭前baseTime，也能实现刷新不丢计时。

// 使用 performance.now 替代 Date.now 的片段
ControlledTimer.prototype.start = function () {
  if (this.running) return;
  this.running = true;
  this.lastStart = performance.now();
  let self = this;
  this.timerId = setInterval(function () {
    self.render();
  }, 1000);
  this.render();
};

通过上述设计，我们拥有了一个从零搭建、可暂停恢复且能准确跑满数小时的JavaScript计时器。核心思路就是放弃计数、拥抱时间差，再辅以清晰的运行状态管理，就能轻松应对绝大多数前端计时需求。

JavaScripttimersetInterval修改时间：2026-08-08 12:33:32