点击后按钮立即禁用但倒计时没显示，是因只设 disabled 未更新文案和启动倒计时；正确做法是禁用按钮、改文案、用 setinterval + 时间戳校准倒计时，并为多按钮隔离状态、safari 中实时计算剩余时间。
点击后按钮立即禁用但倒计时没显示
常见现象是调用 sendCode() 后只执行了 button.disabled = true，却忘了更新按钮文案或渲染倒计时。用户看不到反馈，会反复点击——这反而可能触发多次请求。
正确做法是：禁用按钮 + 立即改文案 + 启动倒计时定时器。注意别用 setTimeout 逐秒递归，容易因页面失焦或 JS 阻塞导致时间不准；推荐用 setInterval + 时间戳校准：
let countdown = 60;
const timer = setInterval(() => {
countdown--;
button.textContent = `${countdown}秒后重发`;
if (countdown <p>关键点：<code>clearInterval</code> 必须在倒计时结束时显式调用，否则定时器残留；<code>button.disabled</code> 和文案必须同步控制，不能只改其一。</p><h3>倒计时期间用户刷新页面，按钮状态错乱</h3><p>页面刷新后 JS 重载，倒计时变量重置为 60，按钮又可点了——但后端其实还没解封，重复发送会失败或被限流。</p><p>解决方案是把冷却截止时间存到 <code>localStorage</code>，而不是倒计时剩余秒数：</p>
- 发送成功后，存
localStorage.setItem('smsCooldownUntil', Date.now() + 60000) - 页面加载时，读取该值，若 >
Date.now()，则立即启动倒计时并禁用按钮 - 避免存秒数，因为用户可能手动改系统时间，而
Date.now()是相对可靠的
注意：不要依赖服务端返回的“60秒后可重发”字段做前端判断——网络延迟或时钟偏差会让它不准；以本地时间戳为准，仅用于 UI 控制。
多个验证码按钮共存时互相干扰
比如登录页有手机号+邮箱两个输入框，各配一个“发送验证码”按钮。如果共用同一个倒计时变量或定时器 ID，点邮箱按钮会意外影响手机号按钮状态。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
必须按按钮实例隔离状态：
- 每个按钮绑定独立的
data-phone或data-type属性，作为 key - 倒计时数据存在对象里，如
cooldownMap = { 'phone': 17123456789, 'email': 'a@b.com' }→ 实际存的是截止时间戳 - 禁用/启用逻辑根据该 key 查找对应状态，不全局共享
countdown变量
否则用户点完邮箱验证码，再切回手机号，发现按钮还是灰色的——这不是 bug，是状态污染。
移动端 Safari 中倒计时卡顿或跳秒
Safari 在后台标签页或锁屏时会冻结 setInterval，唤醒后一次性补多个 tick，导致倒计时跳变（比如从 50 秒直接跳到 45 秒）。
修复方式是每次触发时用当前时间戳重新计算剩余秒数：
const cooldownUntil = localStorage.getItem('smsCooldownUntil');
if (cooldownUntil && Number(cooldownUntil) > Date.now()) {
const remaining = Math.ceil((Number(cooldownUntil) - Date.now()) / 1000);
button.textContent = `${remaining}s`;
// 不依赖 setInterval 的累计减法，而是实时算
}
这样哪怕定时器被暂停过，恢复时也能准确显示真实剩余时间。顺便提醒：别用 requestAnimationFrame 做倒计时，它不保证每秒一次，且页面不可见时会停。
真正麻烦的不是写倒计时，而是让「禁用状态」「文案」「存储时间」「多实例」四者始终一致。少一个环节，用户就会点出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
