用 requestanimationframe 更优，但 setinterval 也可行，关键要每次重新计算剩余时间、避免累积误差，并配合服务端时间戳校准。
秒杀倒计时用 setInterval 还是 requestAnimationFrame？
用 setInterval 就够了，但必须避开系统时间跳变和定时器累积误差。浏览器休眠、标签页切走、系统时间被手动修改都会让 setInterval 走歪——比如本该 00:00:00 结束，实际卡在 00:00:03 才触发。正确做法是每次执行时重新计算剩余毫秒数，不依赖累计次数。
实操建议：
- 用服务端返回的活动结束时间戳（如
endTime: 1745678900000），前端只做差值计算 - 避免写
setInterval(() => { sec-- }, 1000)这类纯递减逻辑 - 每 500ms 更新一次 DOM，既保证视觉流畅，又减少重排压力
- 首次渲染前先调用一次倒计时函数，防止首帧延迟
按钮状态切换必须靠服务端响应，不能仅靠前端禁用
用户点开控制台删掉 disabled 属性、或用 curl 直接发请求，前端禁用形同虚设。真正有效的拦截在后端：库存校验、用户限购、幂等 token 验证缺一不可。
前端配合要点：
- 点击后立即将按钮设为
disabled并显示“提交中…”，防止重复点击 - 成功响应后才跳转或提示“抢购成功”，失败则恢复按钮并展示具体错误（如
"库存不足"或"您已抢过本商品"） - 把防重提交的 token 放在表单 hidden 字段里，和服务端对齐，别用时间戳或随机数硬编码
fetch 抢购请求必须配 AbortSignal 和超时控制
用户手抖连点两次，或网络卡住没响应，会导致多个请求并发发出。后端即使做了幂等，前端也得主动收敛：同一秒内只允许一个有效请求在飞。
实操写法示例：
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 8000);
<p>fetch('/api/seckill', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ skuId, token }),
signal: controller.signal
})
.then(r => r.json())
.finally(() => clearTimeout(timeoutId));</p>
注意：AbortController 不会取消已发出的请求，但能阻止后续 .then 处理；超时设为 8s 是因为 CDN、WAF、数据库锁都可能拖慢响应，太短反而误伤正常用户。
倒计时数字闪烁、跳变、错位？检查 CSS 和 DOM 更新方式
直接 innerHTML 拼接整个倒计时结构，或用 document.write，极易引发重排和闪动。更糟的是用 display: inline-block + 固定宽高做数字格子，却没处理 1 位数补零（如 “9” 应为 “09”），导致宽度突变。
稳定做法：
- 每个数字用独立
<span class="digit"></span>包裹，CSS 设width: 1.2em; text-align: center - JS 更新时只改
.textContent，不碰结构 - 补零统一用
String(num).padStart(2, '0')，别用num （负数或 NaN 会出错） - 避免在倒计时函数里操作 classList 切换主题色——颜色变化交给 CSS transition，JS 只负责加
class="active"这种开关类名
真实场景里，最难缠的不是倒计时不准，而是用户关掉页面再切回来时，本地时间已偏移、定时器丢失、按钮状态与服务端实际库存脱节。这类问题没法靠单次渲染解决，得靠心跳检测 + 定期同步活动状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
