E1.09.1submit lockout设计研究

提交后立即锁定防止重复提交

别名: 防重复提交 · 提交锁定 · double submit

概念解释

请求一旦发出,触发它的按钮要立刻进入不可再点的锁定(submit lockout)。锁定防的是同一意图被送出两次:两笔订单、两封邮件、两次扣款。它发生在按下态之后、结果回来之前,是加载态的行为核心——转圈只是外观,锁才是机制。

机制

从第一次采样到服务器确认,中间有一段用户觉得「还没动」的空白。空白里第二次点击是理性的。若按钮仍接收指针事件,第二次会生成第二条请求。幂等接口能吞掉一部分重复,但下单、支付、验证码通常不幂等。锁定必须发生在客户端发出请求的那一帧,而不是等 HTTP 响应:响应来得越慢,双发窗口越大。只禁用指针不够,还要挡住回车、空格、以及表单默认提交。锁是闸门,加载外观是给闸门做的说明;没有闸门的转圈是在表演忙碌,同时仍接受第二下。

怎么研究

在可调延迟的提交接口上记录请求次数。操纵锁定时机:按下即锁、显示转圈时才锁、响应回来才锁。再让被试在空白里自由连点。

自变量:锁定时机、网络延迟、是否同时锁键盘提交。 因变量:每意图的请求数、双订单率、口头「我点了两次因为没反应」。

实验室里延迟若固定为 300 ms,很多连点来不及发生。要把延迟拉到 1–3 秒,并允许真实的不耐烦,才能看到未锁定的代价。

边界

本地瞬时动作(切标签)不需要锁。需要连续触发的步进器、游戏射击,锁会破坏功能,应改用节流而不是加载锁。请求失败后必须解锁,否则按钮永远卡死——失败解锁是另一条知识。乐观更新若先假装成功,锁的时机与界面解锁可能错开,不能只看转圈消失。

怎么落地

  • 在发出请求的同一调用里把按钮设为不可交互,再画加载外观,顺序不能反。
  • 同时切断指针、回车、空格和表单 submit,不要只设 disabled 外观而不撤监听。
  • 服务端仍做去重令牌,客户端锁不是唯一防线。
  • 验证:在 2 秒延迟的测试接口上连点付款。日志里每个意图只能有一条请求。出现第二条,就是锁晚了或锁漏了通道。

延伸

  • 同组E1.09.2 加载态需保持按钮尺寸稳定 · E1.09.3 长时间加载需提供取消
  • 相邻E1.17 加载中按钮与防重复提交 · E1.02 按钮的状态 · I2 加载与等待
  • 站内检索double submit · submit lockout · idempotency

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.09.1