话题流重复提交？三招搞定软件里的“手抖”问题

你有没有试过在社区发帖、评论或提交表单时，点了一次没反应，又连点两下——结果后台收到了三条一模一样的内容？这种「话题流重复提交」不是服务器卡了，也不是网速慢，而是前端没做防抖，后端也没拦住。

为什么点一下会变好几条？

常见场景：小红书发笔记、知乎写回答、公司内部系统提工单。用户填完内容，手一快连点「发布」按钮三次，前端没禁用按钮，请求就发了三遍；后端又没校验是否已处理过同一条数据，结果数据库里多了三条重复记录，话题流里刷出三段相同文字，看着特别尴尬。

开发者怎么防？简单三步

第一，按钮点完立刻变灰：

document.getElementById('submitBtn').disabled = true;

第二，加时间戳+随机数生成唯一请求标识，后端存进缓存（比如 Redis），10分钟内收到相同 ID 直接忽略：

// 前端示例
const reqId = Date.now() + '_' + Math.random().toString(36).substr(2, 8);
fetch('/api/post', {
  method: 'POST',
  headers: { 'X-Request-ID': reqId },
  body: JSON.stringify(data)
});

第三，后端对关键操作加幂等判断。比如用户提交「今天吃了啥」这个话题，可以按「用户ID+内容MD5+时间窗口」组合去查是否已存在近似记录：

// 伪代码
const hash = md5(userId + content + '202405'); // 按天去重
if (redis.exists(`post:${hash}`)) {
  return res.json({ error: '已提交过，不重复处理' });
}
redis.setex(`post:${hash}`, 86400, '1');

普通用户也能避坑

不用懂代码，记住两个动作就行：提交后别急着关页面，看一眼有没有「发布成功」提示；如果没反应，先等3秒，再看按钮是不是变灰了——变灰就说明已经发出去了，别乱点。很多重复，其实就差这三秒钟的耐心。