使用 `settimeout` 无法持续触发定时逻辑，应改用 `setinterval` 配合时间戳计算实现稳定运行的秒表功能，同时注意变量作用域、时间单位换算及资源清理。
在 JavaScript 中实现一个高精度的毫秒级计时器（如秒表），关键在于持续、稳定地获取经过的时间，而非依赖单次或递归调用 setTimeout。原代码中存在多个核心问题：
- setTimeout 只执行一次，无法形成循环计时；
- startTime 在事件回调内声明为 const startTime = new Date，导致其作用域局限于 click 回调，timer() 函数内部无法访问；
- elapsed 被错误地重置为 0（elapsed=0）但未更新 startTime，逻辑断裂且不可逆；
- 毫秒与秒的显示未做合理分离（例如 seconds 应基于 elapsed 动态计算，而非手动累加）。
✅ 正确做法是：
- 使用 setInterval 启动周期性检查（如每 1ms 更新一次显示）；
- 统一用 Date.now() 或 (new Date()).getTime() 获取毫秒级时间戳，避免 Date 对象实例化开销；
- 将 startTime 和 intervalTimer 声明为外层变量，确保启动、暂停、读取逻辑共享状态；
- 暂停时务必调用 clearInterval(intervalTimer)，防止内存泄漏和后台无效执行。
以下是优化后的完整实现：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
<button id="start_button">Start</button> <button id="stop_button">Stop</button> <div>Seconds: <span id="seconds">0</span></div> <div>Milliseconds: <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(); // 更简洁高效的时间戳获取方式
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 = elapsed; // 或 milliseconds，按需显示
}, 1); // 每毫秒更新（实际精度受浏览器限制，通常 ≥4ms）
}
});
document.getElementById("stop_button").addEventListener('click', () => {
if (intervalTimer) {
clearInterval(intervalTimer);
intervalTimer = null;
}
});⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 浏览器对 setInterval 的最小间隔有约束（通常不低于 4ms），因此「严格每 1ms 执行」仅在 Node.js 或高性能环境可行；前端建议设为 10 或 50 ms 平衡精度与性能；
- 若需更高精度（如动画同步），可考虑 requestAnimationFrame + 时间差计算，但秒表类场景 setInterval 已足够；
- 始终检查 intervalTimer 是否已存在，避免重复启动；
- 使用 textContent 替代 innerHTML 更新纯文本内容，更安全、高效。
通过以上结构，你将获得一个响应及时、逻辑清晰、可维护性强的 JavaScript 秒表计时器。
