本文旨在解决基于 settimeout 实现的 javascript 秒表计时不准、逐渐变慢的问题。通过深入分析传统方法的缺陷，提出并详细演示了利用系统时间戳结合 requestanimationframe api 的解决方案，确保秒表计时的高度准确性和平滑的用户体验，并提供了完整的代码示例和实现解析。
一、传统秒表实现中的计时误差问题
在前端开发中，使用 JavaScript 实现一个毫秒级的秒表功能是常见的需求。然而，许多初学者在尝试时会遇到一个普遍的问题：秒表在运行时会逐渐变慢，与实际时间产生偏差，甚至出现几秒的累计误差。
1.1 问题根源分析
原始的秒表实现通常依赖于 setTimeout 或 setInterval 函数，并尝试在每次回调中递增一个计数器，例如每10毫秒递增一次毫秒数。
// 原始实现片段
function stopwatch() {
if (timer) {
++count; // 毫秒计数
if (count > 99) { // 达到100毫秒，进位到秒
++sec;
count = 0;
}
// ... 其他进位逻辑
setTimeout(stopwatch, 10); // 10毫秒后再次调用
}
}这种方法存在两个主要问题：
- setTimeout / setInterval 的不精确性： JavaScript 的定时器并非完全精确。它们仅保证在指定延迟后将回调函数添加到事件队列，但实际执行时间会受到浏览器事件循环、当前任务负载以及CPU/GPU渲染等因素的影响。这意味着 setTimeout(func, 10) 并不总是精确地在10毫秒后执行 func，它可能在12毫秒、15毫秒甚至更久之后才执行。
- 函数执行时间的影响： 每次 stopwatch 函数执行时，它不仅包含计数器递增的逻辑，还包括 DOM 操作（更新 innerHTML）以及 console.log 等操作。这些操作本身需要消耗一定的时间。如果 stopwatch 函数执行耗时2毫秒，那么 setTimeout(stopwatch, 10) 实际上是每 10 + 2 = 12 毫秒才完成一个周期。随着时间的推移，这些微小的延迟会累积，导致秒表显示的时间逐渐落后于实际时间。
二、基于系统时间与 requestAnimationFrame 的精准秒表方案
为了解决上述计时误差问题，我们需要采取一种更可靠的策略：不再依赖于固定间隔递增计数器，而是基于系统时间来计算已经过去的总时长，并利用 requestAnimationFrame API 来优化更新频率。
立即学习“Java免费学习笔记（深入）”；
2.1 核心思路
- 记录起始时间戳： 在秒表开始计时时，记录当前的系统时间戳（例如使用 new Date().getTime()）。
- 计算已逝时间： 在每次更新秒表显示时，获取当前的系统时间戳，并与起始时间戳相减，得到精确的已逝毫秒数。
- 格式化显示： 将计算出的总毫秒数转换为 HH:MM:SS.ms 的格式进行显示。
- 优化更新机制： 使用 requestAnimationFrame 代替 setTimeout 来调度下一次的秒表更新。requestAnimationFrame 会在浏览器下一次重绘之前调用指定的回调函数，这使得动画或计时器更新与浏览器渲染帧同步，从而提供更平滑、更高效的视觉更新，并减少因渲染阻塞导致的计时偏差。
2.2 实现代码
以下是采用新策略实现的 JavaScript 秒表代码：
HTML 结构 (index.html)
Accurate Stopwatch 00 Hr 00 Min 00 Sec 00
JavaScript 逻辑 (script.js)
var hr = 0;
var min = 0;
var sec = 0;
var count = 0; // 这里的count将不再是累加的毫秒数，而是显示用的毫秒数
var Startbutton = document.getElementById("Start");
var timer = false; // 控制秒表运行状态
var start_time; // 记录秒表开始时的系统时间戳
var animationFrameId; // 用于存储 requestAnimationFrame 的ID，以便取消
/**
* 启动秒表计时
*/
function start() {
if (!timer) { // 防止重复点击
Startbutton.disabled = true;
timer = true;
start_time = (new Date()).getTime(); // 记录开始时间戳
stopwatch(); // 启动计时循环
}
}
/**
* 停止秒表计时
*/
function stop() {
timer = false;
start_time = null; // 清除起始时间
Startbutton.disabled = false;
if (animationFrameId) {
cancelAnimationFrame(animationFrameId); // 取消动画帧请求
}
}
/**
* 重置秒表
*/
function reset() {
stop(); // 先停止计时
hr = 0;
min = 0;
sec = 0;
count = 0;
// 更新显示为初始值
document.getElementById("hr").innerHTML = "00";
document.getElementById("min").innerHTML = "00";
document.getElementById("sec").innerHTML = "00";
document.getElementById("count").innerHTML = "00";
}
/**
* 秒表核心逻辑：计算并更新显示时间
*/
function stopwatch() {
if (timer) {
var now = (new Date()).getTime(); // 获取当前时间戳
var diff = now - start_time; // 计算从开始到现在的总毫秒数
// 使用 Date 对象和 toISOString() 方法将毫秒差值格式化为 HH:MM:SS.ms
// new Date(diff) 会创建一个表示从 UNIX 纪元开始经过 diff 毫秒的 Date 对象
// toISOString() 格式为 YYYY-MM-DDTHH:mm:ss.sssZ
// slice(11, 23) 截取 "HH:mm:ss.sss" 部分
var str_time = (new Date(diff).toISOString().slice(11, 23));
// 从格式化字符串中提取小时、分钟、秒和毫秒（前两位）
var hrString = str_time.substring(0, 2);
var minString = str_time.substring(3, 5);
var secString = str_time.substring(6, 8);
var countString = str_time.substring(9, 11); // 截取毫秒的前两位，即百分之一秒
// 更新DOM显示
document.getElementById("hr").innerHTML = hrString;
document.getElementById("min").innerHTML = minString;
document.getElementById("sec").innerHTML = secString;
document.getElementById("count").innerHTML = countString;
// 使用 requestAnimationFrame 调度下一次更新
// 确保更新与浏览器重绘同步，提供更流畅的体验
animationFrameId = requestAnimationFrame(stopwatch);
}
}2.3 代码解析与注意事项
-
start_time 的引入：
- start_time = (new Date()).getTime(); 在 start() 函数中被调用，精确记录了秒表开始计时的系统时间戳。这是整个精确计时的基础。
-
diff 的计算：
- 在 stopwatch() 函数内部，每次更新时都会计算 var diff = now - start_time;。diff 始终代表自秒表启动以来经过的实际毫秒数，而不是通过累加一个不精确的间隔得到的。
-
时间格式化：
- new Date(diff).toISOString().slice(11, 23) 是一个巧妙且高效的将总毫秒数转换为 HH:MM:SS.ms 格式的方法。toISOString() 返回一个标准化的日期时间字符串，通过 slice 截取所需的时间部分。
- 注意，countString 截取的是毫秒的前两位（str_time.substring(9, 11)），这表示百分之一秒，符合常见的秒表显示习惯（例如 0.01s 到 0.99s）。如果需要显示完整的毫秒（000-999），则需要调整截取范围。
-
requestAnimationFrame 的应用：
- requestAnimationFrame(stopwatch) 是此方案的关键。它告诉浏览器你希望在下一次重绘之前调用 stopwatch 函数。
-
优势：
- 同步渲染： 确保计时器更新与浏览器的帧率同步，避免“画面撕裂”和不必要的重绘，提供更平滑的动画效果。
- 性能优化： 当页面处于后台或不可见时，requestAnimationFrame 会暂停执行，节省CPU和电池资源。
- 精度更高： 浏览器会尽量在最佳时机调用回调，减少了定时器本身带来的误差。
- 取消动画帧： 为了在 stop() 或 reset() 时停止计时，需要使用 cancelAnimationFrame(animationFrameId) 来取消之前发出的动画帧请求。因此，我们引入了 animationFrameId 变量来存储 requestAnimationFrame 返回的ID。
-
DOM 更新：
- 直接更新 innerHTML 效率较高，但频繁的 DOM 操作仍会消耗资源。对于高性能需求，可以考虑使用虚拟 DOM 或其他优化手段，但对于一个简单的秒表来说，这种方式足够。
-
防止重复启动：
- 在 start() 函数中添加 if (!timer) 判断，确保秒表在运行时无法再次被启动，避免逻辑混乱。
三、总结
通过将秒表的核心逻辑从基于递增计数器和不精确定时器的方式，转变为基于系统时间戳计算已逝时间并利用 requestAnimationFrame 进行高效、同步的显示更新，我们能够构建出一个高度准确且用户体验流畅的 JavaScript 秒表。这种方法不仅解决了传统方法中常见的计时误差问题，也遵循了现代前端动画和性能优化的最佳实践。理解并应用 Date 对象和 requestAnimationFrame 是实现精确前端计时和动画效果的关键。
