提交后立即禁用提交入口
别名: 防重复提交 · double submit · disable on submit · 连点
概念解释
人在等待结果时会再次点同一个提交入口——网络慢、按钮没有即时态、回车被键盘重复。立即禁用指第一次提交动作被接受的那一拍,主按钮、回车提交、菜单里的「保存」全部进入不可再触发状态,直到这次请求结束。禁用的是入口,不是把表单冻成不可见。这条只谈成功发出之后如何挡住第二次发出,不谈失败之后要不要把门打开。幂等接口能在服务端吞掉重复,但不能让人以为第一次没点上而连点出两笔订单。
机制
提交到响应之间有一段空白。人的模型是「按钮没动 = 没生效」,空白越长,第二次点击的概率越高。按钮在视觉上仍是可点的主行动,等于邀请再点。第二层是多通道触发:鼠标点击、触摸的抬起、键盘回车、输入法确认键可能在几十毫秒内各送一次。只把按钮设为 disabled 而回车仍绑定在 form.submit 上,第二条通道还活着。禁用必须发生在事件被接受时,而不是等动画结束或等服务器应答——那几十到几百毫秒正是连点窗口。加载文案(「提交中」)补充的是解释,不代替禁用:能读到「提交中」但仍可点,人会当成进度条再戳一下。
怎么研究
在人为延迟(1 秒、3 秒、8 秒)下观察连点。比较「无反馈可再点」「仅文案变化仍可点」「立即禁用」。纳入键盘回车和双击手势。
自变量:禁用是否在第一次事件同步发生、延迟时长、回车是否仍提交、按钮文案是否改为进行中。 因变量:单次意图产生的请求次数、重复订单或重复留言数、人是否报告「没点上」。
实验室里被试被要求「只点一次」会压低连点。要用「点完等到结果、认为没反应就再点」的自然指令。不要把服务端去重成功当成入口没禁用的证据——用户已经发出了两次意图。
边界
草稿「保存」若每键入都可点,禁用策略不适用,那是另一次写入而不是同一意图的重复。离线排队时入口可以保持可用来把变更送进队列,但同一意图在队列里只能有一条。无障碍用户依赖按钮可聚焦来听到状态;禁用后要用活区域播报「正在提交」,否则焦点消失且无声。自动重试中的请求不算用户的第二次提交,入口应保持禁用直到整次尝试结束。
怎么落地
- 在提交处理器的第一行同步禁用所有提交通道:主按钮、次要「保存并关闭」、表单的回车提交,并挡住双击。
- 禁用的同时把按钮改成进行中文案或等待态,让空白被解释为「已接受」而不是「没点上」。
- 不要等网络回调才禁用;动画和请求可以并行,入口关闭必须是同步的。
- 验证:把接口延迟到 3 秒,连点按钮并按回车,网络面板里只能看到一次请求。用键盘只按回车提交,确认回车在第一次之后被吞掉。双击触摸屏再测一次。