JavaScript 的 Set 是前端防重复提交的轻量方案，天然去重、查找 O(1)、内存可控；需配合按钮禁用、防抖及合理清理策略，并不能替代后端幂等校验。
用 JavaScript 的 Set 记录已处理的 ID，是前端防重复提交或简单防刷的轻量方案——它天然去重、查找快（O(1)）、内存占用可控，适合短时、单页场景。
用 Set 缓存请求 ID（如订单号、表单唯一标识）
在用户点击提交按钮后，先生成唯一 ID（如时间戳 + 随机数、或后端返回的 token），检查是否已在 Set 中存在；若存在则拦截提交，否则加入 Set 并发起请求：
const submittedIds = new Set();
function handleSubmit() {
const id = generateRequestId(); // 例如：Date.now() + '_' + Math.random().toString(36).substr(2, 5)
if (submittedIds.has(id)) {
console.warn('重复提交，已忽略');
return;
}
submittedIds.add(id);
// 发起真实请求（如 fetch 或 axios）
fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) })
.then(res => res.json())
.finally(() => {
// 可选：成功后清理，避免内存无限增长
submittedIds.delete(id);
});
}
配合防抖或按钮禁用，增强体验
仅靠 Set 拦截不够友好，建议组合使用：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 点击后立即禁用按钮：
button.disabled = true，防止视觉误操作 - 请求失败时恢复按钮，并从 Set 中移除 ID，允许重试
- 对高频操作（如搜索框触发请求），可加防抖，再配合 Set 避免防抖窗口内多次触发仍重复
注意有效期和内存管理
Set 不自动过期，长时间运行可能累积大量 ID。根据业务选择清理策略：
立即学习“Java免费学习笔记（深入）”；
-
按需清理：请求成功/失败后立刻
delete()对应 ID -
定时清理：用
setTimeout或requestIdleCallback定期清空整个 Set（适合短期活动页） - 限制大小：维护一个固定长度的队列（如用数组 + splice），只保留最近 N 个 ID，再转为 Set 查询
不能替代后端校验
前端 Set 仅作辅助防护，完全可被绕过（如禁用 JS、重复发包）。关键逻辑必须由后端实现幂等性（如基于唯一索引、分布式锁、token 校验），前端 Set 只用来提升用户体验和减轻无效请求压力。
