按钮点击后禁用并倒计时需三步闭环：设 disabled、用递归 settimeout 倒数、归零后清除定时器、移除 disabled、还原文字；推荐 data-action 标识按钮，缓存原始文案，避免 setinterval 漂移。
按钮点击后如何禁用并倒计时？
核心是用 JavaScript 控制 disabled 属性和 textContent，避免用户重复点击导致多次发请求。关键不是“显示时间”，而是“禁用 + 倒数 + 恢复”三步闭环。
常见错误是只改文字不设 disabled，或倒计时结束没清定时器导致内存泄漏。
- 用
setInterval每秒减 1，初始值建议设为 60（短信验证码常规有效期） - 倒计时到 0 后必须：
clearInterval清除定时器、移除disabled、还原按钮文字（如 “获取验证码”） - 点击前先检查
button.disabled，已禁用则直接 return，防止快速连点触发多个定时器
HTML 按钮怎么写才方便 JS 控制？
不要用内联 onclick，也不要用 class 或 id 做唯一标识——推荐用 data-* 属性标记行为类型，比如 data-action="send-sms"，方便后续扩展多类型验证码按钮。
示例结构：
<button type="button" data-action="send-sms">获取验证码</button>
-
type="button"必须写，否则在 form 内可能触发表单提交 - 避免用
id绑定，页面多个验证码按钮时易冲突；统一用document.querySelectorAll('[data-action="send-sms"]')批量绑定 - 文字内容不要硬编码在 JS 里，从按钮原始
textContent提取，便于国际化或运营修改
倒计时文字格式怎么处理更稳妥？
别拼接字符串如 "剩余 " + sec + " 秒"，中文空格、单位位置容易被 UI 框架或 CSS 截断。直接替换整个 textContent 更可控。
- 倒计时期间用
button.textContent = `(${sec}s)`，括号+秒数简洁且不易折行 - 恢复时用
button.textContent = originalText，originalText 在点击前缓存，不是从 DOM 重新读取 - 如果按钮有图标（如 SVG），倒计时期间建议隐藏图标，只留文字，避免布局抖动
为什么用 setTimeout 替代 setInterval 更安全？
看似多写几行，但能规避 setInterval 在页面切后台时的计时漂移问题：浏览器冻结定时器，切回后会集中触发多次回调，导致倒计时跳变甚至负数。
- 用递归
setTimeout，每次倒数完再设下一次，实际间隔严格为 1000ms - 代码结构类似：
function countdown(sec) { if (sec countdown(sec - 1), 1000); } - 注意：首次调用前需保存原始文字、设
disabled、清空可能存在的旧定时器（比如用户点了两次）
真实场景里，网络请求失败后要不要重置倒计时？得看业务逻辑——多数情况应保持倒计时继续，避免用户误以为可重发。这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
