必须基于时间戳实时计算倒计时，不能用 seconds-- 累减，因页面失焦或主线程卡顿会导致 setinterval 节流或延迟，引发跳秒、归零延迟；应存 targettime = date.now() + 总毫秒数，每次回调用 math.max(0, targettime - date.now()) 计算剩余毫秒。
直接用 setInterval 每秒更新 textContent 就行，但必须基于时间戳实时计算，不能靠累减变量——否则页面切后台、主线程卡顿都会导致跳秒或归零延迟。
为什么不能用 seconds-- 累减？
看似简单，实则埋雷。浏览器在标签页失焦时会节流 setInterval，可能从每秒一次变成几十秒才触发一次；主线程忙（比如重排、长任务）也会让回调延迟。结果就是：你设了 60 秒倒计时，实际跑了 72 秒才到 0，或者直接从 10 秒跳到 0。
- 正确做法是只存一个目标时间戳：
const targetTime = Date.now() + 60000 - 每次回调里都重新算：
const remainingMs = Math.max(0, targetTime - Date.now()) - 再换算成你要的格式，不依赖任何中间状态变量
更新 <td> 或 <code><span></span> 时用 textContent 还是 innerHTML？
一律用 textContent。它只改文本，不解析 HTML，安全、轻量、不破坏子节点结构。
- 如果单元格里嵌了图标、按钮或
class样式，innerHTML = "05:23"会把它们全清掉 -
innerText虽然也安全，但它受 CSS 影响（比如display: none的内容不算），textContent更稳定 - 别图省事拼接字符串：
cell.textContent = mins + ":" + secs可以，但别写成cell.innerHTML = ...即使内容“看起来”纯数字
多个倒计时共存时怎么避免互相干扰？
每个倒计时必须有独立的定时器 ID 和目标时间戳，不能共用一个 setInterval 回调去统一更新所有单元格。
- 错误示范：
setInterval(updateAllCountdowns, 1000)—— 某个倒计时归零后没清理自己的逻辑，定时器还在跑，CPU 白耗 - 正确方式：对每个
<td data-countdown-id="order-101">，单独调用 <code>startCountdown(cell, targetTime)，内部生成并保存自己的let timerId = null - DOM 动态渲染（如 Vue/React 表格重绘）后，旧
<td> 元素已销毁，但旧定时器还在试图更新 <code>null，所以每次更新前要先querySelector检查元素是否存在倒计时归零后容易漏掉的关键收尾动作
归零那一刻不是终点，而是最容易出问题的起点：定时器没清、DOM 没置终态、用户状态没恢复、重复点击没防住。
- 必须立刻调用
clearInterval(timerId)，且把timerId设为null，否则下次启动可能误清错的定时器 -
cell.textContent要显式设为终态，比如"00:00"或"已过期"，不能留空或不处理 - 如果是按钮倒计时，记得同步恢复
disabled = false和原始文案，否则按钮就永远点不了了 - 更隐蔽的问题：浮点误差可能导致
remainingMs算出来是-1.23，Math.floor(-1.23)得-2，显示成-0:-2—— 所以务必用Math.max(0, ...)包一层
- 必须立刻调用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
