倒计时按钮的核心逻辑是用可取消的 setInterval 定时器配合状态锁控制点击：点击即禁用按钮、启动倒计时，归零后恢复；需保存 timer ID 并每次点击前清理旧定时器，防止重复触发。
倒计时按钮的核心逻辑是什么
倒计时按钮不是靠 setTimeout 一层层嵌套实现的，而是用一个可取消的定时器 + 状态锁控制点击行为。关键在于：按钮点击后立即禁用、显示剩余秒数、时间归零后自动恢复。否则用户反复点击会触发多次提交，或倒计时错乱。
用 setInterval 实现稳定倒计时（别用递归 setTimeout）
递归调用 setTimeout 容易因 JS 执行延迟导致倒计时不准；setInterval 更可控，且能用 clearInterval 精确终止。注意必须保存返回的 timer ID，否则无法清理。
常见错误：clearInterval 调用前没判断 timer 是否已存在，导致重复清除或清除失败；倒计时结束没重置 disabled 和 innerText。
示例代码片段：
立即学习“前端免费学习笔记（深入）”；
let timer = null;
const btn = document.querySelector('#send-btn');
btn.addEventListener('click', () => {
if (timer) return; // 防重复点击
let seconds = 60;
btn.disabled = true;
btn.textContent = `${seconds}s`;
<p>timer = setInterval(() => {
seconds--;
btn.textContent = <code>${seconds}s</code>;
if (seconds <= 0) {
clearInterval(timer);
timer = null;
btn.disabled = false;
btn.textContent = '发送验证码';
}
}, 1000);
});表单提交场景下必须阻止默认行为
如果按钮在 <form> 内且类型为 submit，不加 event.preventDefault() 会导致倒计时未完成就提交表单。尤其在防刷场景中，这是硬性要求。
使用建议：
- 按钮类型设为
button，由 JS 显式触发提交（更可控） - 若必须用
submit，事件监听里第一行写event.preventDefault() - 倒计时结束后，可手动调用
form.submit()或发 AJAX，别依赖原生提交
兼容性和边界情况处理
移动端频繁切后台再切回，setInterval 可能被节流甚至暂停，导致倒计时“跳秒”或卡住。不能只依赖定时器 tick，得结合时间戳校准。
更健壮的做法是记录开始时间，每次 tick 用 Date.now() - startTime 计算真实已过毫秒，再换算剩余秒数。但对 60 秒类短倒计时，多数场景直接用 setInterval 即可——前提是用户不长时间切走页面。
容易被忽略的一点：按钮恢复后，如果用户立刻再次点击，要确保旧 timer 已清空。所以每次点击前都应检查并清理 timer，而不是只在倒计时结束时清理。
