点击瞬间禁用按钮是最直接有效的防重方案，需在事件回调首行设button.disabled=true，异步完成后恢复，每张卡片独立锁定，统一监听click事件提取ID，后端返回重复操作提示时不得重置UI状态。
点击后立即禁用按钮是最直接有效的防重方案
用户点一次赞，按钮必须立刻不可再点，否则视觉反馈和请求都乱套。核心不是“等接口返回再处理”，而是“点击瞬间就锁住”。disabled 属性就是干这事的，别绕弯子。
常见错误是只改文字或加 loading 类，但没设 disabled —— 键盘回车、多次快速点击、触屏连击全都能穿透过去。
- 必须在事件回调第一行执行
button.disabled = true - 异步操作（如
fetch）完成后，无论成功失败都要恢复：button.disabled = false - 别用
pointer-events: none替代disabled—— 它不阻止键盘触发，也不影响表单提交语义
动态卡片场景下，每个点赞按钮要独立锁定
一页有 20 张文章卡片，每张都有自己的点赞按钮。不能全局锁一个变量，也不能靠 class 名批量操作 —— 那会误伤其他卡片。
正确做法是把状态存在内存里，按卡片唯一 ID 区分：
立即学习“前端免费学习笔记（深入）”；
- 用
Map存储已操作记录：const likedCards = new Map() - 点击时先查
likedCards.has(contentId)，命中就直接return - 确认未操作后，再设
button.disabled = true并写入likedCards.set(contentId, true) - 刷新页面后状态丢失是预期行为，前端不负责持久化
别在 HTML 里写内联 onclick 禁用逻辑
<button onclick="this.disabled=true; sendLike()"> 这种写法看着快，实际埋雷：回车提交表单时不会触发它；多个 submit 按钮只锁了当前这个；失败后按钮永远卡死。
可靠入口只有一个：form 的 submit 事件，或按钮的 click 事件绑定在 JS 里：
- 监听
document.addEventListener('click', e => { if (e.target.matches('.like-btn')) { ... } }) - 或为每个按钮单独绑定：
btn.addEventListener('click', handler) - 统一入口 +
e.target.dataset.id提取卡片 ID，比遍历 class 更安全
后端返回 409 或 { code: 4001 } 时，前端不该重试或改 UI
用户点了两次？那第二次请求大概率被后端拒掉，返回 409 Conflict 或自定义错误码。这时候前端唯一该做的事是：原样弹提示“你已经赞过了”，然后 不修改任何 UI 状态 —— 比如不要把已点亮的图标又变灰。
容易踩的坑：
- 误把后端幂等响应当失败，自动重置按钮
disabled状态 - 用时间戳或随机数生成“防重 token”塞进请求 —— 这是后端职责，前端只需信任响应
- 试图用
localStorage记录所有点赞 ID 来“还原状态” —— 同一设备多标签页、隐私模式、缓存清理都会让这逻辑失效
复杂点在于：禁用按钮只是第一道防线，真正的幂等必须由后端保证；前端能做的，就是不让用户产生“还能点”的错觉。
