倒计时按钮的核心逻辑是用可取消的 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 </p><h3>表单提交场景下必须阻止默认行为</h3><p>如果按钮在 <code><form></form></code> 内且类型为 <code>submit</code>，不加 <code>event.preventDefault()</code> 会导致倒计时未完成就提交表单。尤其在防刷场景中，这是硬性要求。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p>使用建议：</p>
- 按钮类型设为
button，由 JS 显式触发提交（更可控） - 若必须用
submit，事件监听里第一行写event.preventDefault() - 倒计时结束后，可手动调用
form.submit()或发 AJAX，别依赖原生提交
兼容性和边界情况处理
移动端频繁切后台再切回，setInterval 可能被节流甚至暂停，导致倒计时“跳秒”或卡住。不能只依赖定时器 tick，得结合时间戳校准。
更健壮的做法是记录开始时间，每次 tick 用 Date.now() - startTime 计算真实已过毫秒，再换算剩余秒数。但对 60 秒类短倒计时，多数场景直接用 setInterval 即可——前提是用户不长时间切走页面。
容易被忽略的一点：按钮恢复后，如果用户立刻再次点击，要确保旧 timer 已清空。所以每次点击前都应检查并清理 timer，而不是只在倒计时结束时清理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
