推荐用innertext，更安全轻量且保留可见空白；避免innerhtml以防注入和开销；注意清除重复定时器、恢复按钮状态，并用时间戳校准精度。
按钮内倒计时用 innerText 还是 innerHTML？
直接改 innerText 更安全，避免 HTML 注入风险；除非你明确需要插入标签（比如加个 或图标），否则别碰 innerHTML。按钮文本纯数字倒计时场景下，innerText 足够且更轻量。
常见错误是用 textContent 后发现空格/换行被压缩——它会抹掉所有空白符，而 innerText 保留视觉上可见的空白，对按钮这种紧凑控件更友好。
- ✅ 推荐：
btn.innerText = `${seconds}s` - ❌ 避免：
btn.innerHTML = `<span>${seconds}</span>s`（无必要嵌套，增加 DOM 开销） - ⚠️ 注意：
btn.textContent = ...在多空格或换行时渲染效果可能和预期不一致
倒计时卡住不动？检查 setInterval 是否被重复调用
很多同学把倒计时逻辑封装成函数，但每次点击都重新 setInterval，却没清理上一次的定时器，结果多个定时器同时跑，秒数跳变、甚至负数乱刷。
关键不是“怎么启动”，而是“怎么确保只有一份在跑”：
- 声明一个外层变量：
let countdownTimer = null - 每次开始前先清除：
if (countdownTimer) clearInterval(countdownTimer) - 赋值新定时器：
countdownTimer = setInterval(...) - 倒计时结束务必手动
clearInterval(countdownTimer)并重置变量
倒计时结束后按钮状态怎么恢复？ 单纯清空文本或还原初始文字不够——用户可能想再次点击触发新倒计时，所以得同步恢复可点击态和原始文案。
典型遗漏点：忘了重置 disabled 属性。按钮倒计时期间通常设为 disabled 防重复点击，但结束时不恢复，按钮就永远点不了了。
- 倒计时启动时：
btn.disabled = true - 倒计时结束时：
btn.disabled = false; btn.innerText = '发送验证码' - 如果用了 class 控制样式（如
btn--disabled），记得同步增删 class
为什么倒计时从 59 秒跳到 0 就停了，实际过了 60 秒？
因为 setInterval(fn, 1000) 不保证精确每秒执行——JS 是单线程，如果主线程正忙（比如有长任务、重绘卡顿），回调会被推迟。连续多次延迟后，误差累积明显。
更可靠的方案是记录起始时间戳，每次执行时用当前时间算剩余秒数：
- 启动时记：
const startAt = Date.now() + duration * 1000 - 定时器里算：
const remaining = Math.max(0, Math.ceil((startAt - Date.now()) / 1000)) - 这样即使某次回调晚了 300ms，下一次仍能对齐真实剩余时间
倒计时真正难的不是显示数字，而是时间精度、状态隔离和清理时机——尤其是多个按钮共存时，每个都要独立维护自己的定时器和状态，漏掉一个 clearInterval 就埋了内存泄漏隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
