应通过状态同步、按钮禁用与倒计时反馈确保验证码只发一次：点击后禁用按钮并启动倒计时，成功后持续倒计时至0自动恢复，失败则立即重置；避免内联onclick和手动恢复disabled。
点击按钮触发发送验证码的常见错误
直接给 <button></button> 绑定 onclick 但没阻止默认行为，或没做防重复点击，结果用户狂点三次，后端收到三条发码请求，验证码却只发最后一次——这是最典型的逻辑断裂。
真正要解决的不是“怎么发”，而是“怎么确保只发一次、且用户知道正在发”。关键点在于：状态同步 + 按钮禁用 + 倒计时反馈。
- 别用
disabled属性后又靠 JS 手动恢复——容易漏恢复或时机错乱，应配合倒计时自动启用 - 别在按钮上直接写
onclick="sendCode()"，把逻辑耦合进 HTML，调试和测试都麻烦 - 后端返回非
200时（比如429 Too Many Requests或400 Bad Request），前端必须重置按钮状态，否则用户卡死
用 JavaScript 实现带倒计时的防重发按钮
核心是控制按钮的 disabled 状态和 innerText，并用 setTimeout 递减。不需要框架，原生就能稳住。
示例逻辑（假设你已有一个 sendVerificationCode(phone) 函数，返回 Promise）：
const btn = document.getElementById('send-code-btn');
btn.addEventListener('click', async () => {
if (btn.disabled) return;
btn.disabled = true;
btn.textContent = '60s';
try {
await sendVerificationCode(document.getElementById('phone').value);
} catch (err) {
// 任何失败都要恢复按钮
btn.disabled = false;
btn.textContent = '获取验证码';
console.error(err);
}
});
// 倒计时逻辑（实际应在成功后启动）
let countdown = 60;
const timer = setInterval(() => {
countdown--;
btn.textContent = `${countdown}s`;
if (countdown
<p>注意：倒计时不能只靠前端控制，后端必须对同一手机号做时间窗口限流（如 60 秒内最多 1 次），否则绕过 JS 就能刷。</p>
<h3>后端返回错误时按钮状态容易被忽略</h3>
<p>很多人只处理成功路径，但网络超时、手机号格式错、频率超限这三类错误一发生，按钮就永远卡在 <code>60s</code> 状态，用户无法重试。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>必须在 Promise 的 <code>catch</code> 块里做两件事：</p>
- 清除倒计时定时器（如果已启动）
- 显式设置
btn.disabled = false和btn.textContent回初始值 - 可选：用
alert或轻提示告知具体错误，比如err.response?.data?.message
特别注意：如果用 fetch，4xx/5xx 不会自动 reject，得手动检查 response.ok；用 axios 则需确认是否配置了 validateStatus。
移动端点击无反馈？加 touch-action 和 active 样式
在 iOS Safari 或某些安卓 WebView 里，按钮点击后没视觉变化，用户不确定是否点中。这不是 JS 问题，是 CSS 缺失。
只需加两行：
button {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
button:active {
opacity: 0.7;
}
不加 touch-action: manipulation，iOS 可能延迟 300ms 触发 click；不加 :active，用户点下去像没反应——这两个坑和发码逻辑无关，但直接影响体验闭环。
倒计时精度、按钮语义化、错误兜底、移动端响应，四点缺一不可。少一个，用户就在那里反复点，然后投诉“验证码收不到”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
