本文详解为何 setTimeout 不适用于持续计时，以及如何使用 setInterval 构建高精度、可启停的毫秒级计时器，并提供完整可运行代码与关键注意事项。
本文详解为何 `settimeout` 不适用于持续计时，以及如何使用 `setinterval` 构建高精度、可启停的毫秒级计时器，并提供完整可运行代码与关键注意事项。
在 JavaScript 中实现一个准确的毫秒级计时器（如秒表），核心在于持续、稳定地更新时间差值。原代码试图用单次 setTimeout（延迟 1ms）来模拟循环计时，但 setTimeout 仅执行一次，无法自动重复——这正是计时“不到 10ms 就停止”的根本原因。此外，startTime 被声明在事件回调内（const startTime = new Date），导致 timer() 函数内部无法访问，引发 ReferenceError；而 elapsed=0 的赋值不会影响外层变量，逻辑上也无法实现秒数累加。
✅ 正确方案：使用 setInterval 进行周期性轮询，并配合 clearInterval 实现可控启停。
以下为优化后的完整实现：
<button id="start_button">启动</button> <button id="stop_button">停止</button> <div>秒数：<span id="seconds">0</span></div> <div>毫秒：<span id="milli_seconds">0</span></div>
let intervalTimer = null;
let startTime = 0;
let elapsed = 0;
document.getElementById("start_button").addEventListener('click', () => {
// 仅在未运行时重置并启动
if (!intervalTimer) {
startTime = Date.now(); // 推荐使用更轻量的 Date.now()
intervalTimer = setInterval(() => {
elapsed = Date.now() - startTime;
const seconds = Math.floor(elapsed / 1000);
const milliSeconds = elapsed % 1000;
document.getElementById("seconds").textContent = seconds;
document.getElementById("milli_seconds").textContent = milliSeconds;
}, 1); // 每 1ms 更新一次显示（注意：实际精度受浏览器限制）
}
});
document.getElementById("stop_button").addEventListener('click', () => {
if (intervalTimer) {
clearInterval(intervalTimer);
intervalTimer = null;
}
});? 关键说明与最佳实践：
立即学习“Java免费学习笔记（深入）”；
- ✅ Date.now() 优于 new Date().getTime()：避免创建 Date 对象，性能更高，语义更清晰；
- ✅ 状态隔离与防重复启动：通过 intervalTimer 是否为 null 判断计时器状态，防止多次点击启动多个定时器；
- ⚠️ 1ms 并非真实刷新间隔：浏览器对 setInterval 的最小间隔有下限（通常 ≥4ms），且主线程阻塞会影响精度。如需更高可靠性，建议采用「时间戳差值驱动」而非依赖调用频率（本例已采用该模式）；
- ? 扩展建议：如需支持暂停/继续、重置、格式化显示（如 00:00:00.000），可在 elapsed 基础上封装状态机，或引入 performance.now() 获取更高精度（需注意兼容性）。
掌握 setInterval + 时间戳差值的核心范式，是构建 Web 端计时类功能（倒计时、秒表、动画帧同步等）的基石。切记：setTimeout 用于“延后一次”，setInterval 才是“周期执行”的标准工具。
