Answers
在第一次提交之后设置一定时间才能提交第二次,javascript里面有一个叫做debounce的可以应用到你得场景,
你可以把你提交的动作放到debounce里面,例如:
'use strict';
var debounce = function(func, timeout) {
var timer;
return function() {
var _this = this;
var args = Array.prototype.slice.call(arguments);
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(_this, args);
}, timeout);
};
};
这样当你再调用post的提交方法submit()的时候,
var debounced = debounce(submit, 100);
debounced();
debounced();
debounced();
debounced();
它只会提交一次。
Mariya
answered 9 years, 10 months ago
所有“通过前台JS,约束提交行为本身不会重复发生”的答案都是彻底错误的。
弱网络时如果POST请求到达了服务器响应却没回去,此时客户端报浏览器原生的超时错误,访客按F5重发,你的JS如之奈何?!
JS阻止重复点击按钮,仅仅是“锦上添花”的体验改进而已,根本称不上“防重复提交”的可靠方案。事实上我们也根本做不到“防止用户重复提交”——HTTP请求的到达能拦的了吗?这个需求的本质是:如何让 重复提交的内容能够被识别出来(从而不被重复处理) 。
重复提交的鉴别,无非两种思路:
- 比对内容相同的提交是否重复出现。
- 为每次提交标号,比对相同编号的提交是否重复出现。
而其中(1)又是等同于(2)的。因为提交不可能全量比较,只可能计算一个哈希值(MD5等)去比,这样无非就是依赖提交的内容做了一个标号。
HTTP协议是无状态的,不能从HTTP协议本身下手,所以自然要在业务层加上这个标号。
考虑清楚前提,办法就容易了。用种种手段把表单标上号就可以。不限于以下方法:
- 服务器下发表单时,在表单里附加一个毫秒时间戳或唯一ID
- 客户端JS在表单内,插入点按提交按钮的时间戳,以及浏览器的信息
- 服务器端收到表单时,对表单的内容做哈希签名并缓存
- 有些业务逻辑天生就是防重复的。例如订单的状态流转,一般都是单向、不重复且不可逆的。此时要充分利用业务逻辑,尽量在直接回弹不合法请求的同时,就把重复提交顺手一起干掉。
羽濑川小鸠
answered 9 years, 10 months ago