按钮点击后应立即置灰并启动倒计时，禁用状态不可依赖异步回调；需用 setinterval 管理计时、保存 timer id 并在结束时 clearinterval 清理；文字更新用 textcontent 防 xss；需校准服务端时间并持久化剩余秒数以防刷新失效。
点击后按钮立即置灰并开始倒计时
直接在 onclick 里调用倒计时函数，别等异步请求返回才禁用——用户点下去那一刻就要反馈。常见错误是只在 fetch 或 ajax 成功回调里禁用按钮，结果连续点多次仍会发多请求。
- 给按钮加
disabled属性并改文字，比如btn.disabled = true; btn.textContent = '60s后重试'; - 用
let countdown = 60计数，setInterval每秒减 1，直到 0 - 必须在定时器启动前保存
setInterval返回的 id，否则无法清除 - 倒计时结束要手动清掉定时器、恢复按钮状态，否则内存泄漏 + 按钮永远卡住
倒计时结束没清定时器，按钮就再也点不了
clearInterval 必须执行且只能执行一次，但很多人写在 if (countdown 分支里却不 break 或 return，导致后续循环继续执行，甚至重复恢复按钮状态。更隐蔽的问题是：多个点击触发多个 <code>setInterval，但只存了最后一个 id，旧的全漏清。
- 声明一个外层变量
let timerId = null，每次启动前先if (timerId) clearInterval(timerId) - 倒计时归零后，除了
clearInterval(timerId)，还要timerId = null - 按钮恢复逻辑（如
btn.disabled = false）只写在归零分支里，别放在setInterval的每轮回调中
用 setTimeout 递归比 setInterval 更安全？
是的。倒计时精度不敏感，但稳定性更重要。setInterval 在页面切后台或 JS 阻塞时可能批量触发、跳秒；而 setTimeout 递归每次只设下一次，天然防堆积。
- 写法：倒计时函数末尾调用
setTimeout(() => countdownFn(), 1000)，而不是setInterval(countdownFn, 1000) - 递归方式下，
clearTimeout同样要配对使用，且只需清理当前 pending 的那一个 - 如果倒计时需要和后端时间对齐（比如验证码 60 秒），就不能只靠前端计时，得用服务端下发的过期时间戳做校准
按钮文字动态更新，别直接拼字符串
用模板字符串或 textContent 更新，避免 innerHTML 引入 XSS 风险，尤其当倒计时文案含用户输入内容时。
- 正确：
btn.textContent = `${countdown}s 后可重发` - 错误：
btn.innerHTML = countdown + 's 后可重发'（万一 countdown 是恶意字符串就糟了） - 注意中文空格和单位统一，比如「60s」不如「60 秒」，iOS Safari 对「s」缩写渲染有时异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
