正确秒表应基于时间戳差值计算：启动时记录 startTime = Date.now()，定时器每50ms调用 render()，仅当距上次渲染≥10ms才更新 DOM；用 isRunning 显式管理状态，防重复启停；容器需禁用用户选中和双指缩放。
用 setInterval 实现基础秒表逻辑，但别直接用 ++seconds
秒表看起来只是“每秒加 1”，但真实场景中不能靠 setInterval(() => seconds++, 1000) 硬凑——浏览器标签页切走、系统休眠、JS 主线程阻塞都会导致计时漂移。正确做法是记录起始时间戳，每次渲染时用 Date.now() - startTime 算经过毫秒数，再换算成分:秒:毫秒。
关键点：
-
startTime必须在点击“开始”时用Date.now()精确记录，不是new Date().getTime()（二者等价，但前者更简洁） - 定时器间隔设为
50或100ms，而非1000ms，否则视觉更新卡顿、毫秒位永远为 0 - 暂停时只清除
intervalId，不重置startTime，继续时用原起点计算，保证连续性
DOM 更新要防抖，避免 textContent 频繁写入触发重排
每 50ms 就更新一次显示，如果每次都做字符串拼接 + element.textContent = ...，在低端设备或长时运行后可能有轻微卡顿。实际可加一层简单判断：只在毫秒值变化 ≥10ms 时才刷新 DOM。
示例逻辑片段：
let lastRenderMs = 0;
function render() {
const elapsed = Date.now() - startTime;
if (elapsed - lastRenderMs >= 10) {
const [min, sec, ms] = formatTime(elapsed);
displayEl.textContent = `${min}:${sec}.${ms}`;
lastRenderMs = elapsed;
}
}
注意：formatTime 应返回左补零字符串（如 "03:42.890"），不要在渲染时现场 .padStart() —— 那会额外创建字符串对象，累积 GC 压力。
暂停/继续状态必须用布尔变量显式管理，别依赖 intervalId 是否为 null
常见错误是仅靠 if (intervalId) 判断是否正在运行，但 clearInterval(null) 是安全的，intervalId 可能残留旧值；更糟的是，用户快速连点“开始→暂停→开始”，可能启多个定时器叠加执行。
应维护独立状态：
- 定义
let isRunning = false - 点击“开始”时，仅当
!isRunning才设置intervalId并置isRunning = true - 点击“暂停”时，仅当
isRunning才clearInterval(intervalId)并置isRunning = false - “重置”需同时清空
intervalId、isRunning、startTime和显示内容
移动端双击缩放、长按选中会干扰操作，得关掉
在手机上测试时，秒表按钮可能被双击放大、长按弹出菜单，甚至误触文字选择。这不是 JS 问题，是 HTML 层缺失基础防护。
给包裹秒表的容器元素加上这些内联样式（或写进 CSS）：
style="user-select: none; -webkit-user-select: none; touch-action: manipulation;"
其中 touch-action: manipulation 能禁用双指缩放，同时保留滚动和点击响应；-webkit-user-select 兼容旧版 Safari；纯 user-select: none 在现代 Chrome/Firefox 已足够。
顺带一提：按钮本身用 ，避免表单默认提交行为；所有时间值建议存为 number 类型，别转成 string 后再解析——后续想加「导出记录」或「分段计时」时，类型混乱会立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
