如何用JS有效防止用户重复点击提交按钮？

Question

因为服务器响应比较慢，用户提交表单后会等待一段时间，可能会造成用户以为没反应重复的点击提交按钮。onclick="this.disabled=true" 这个不能用，因为当表单有些字段不符合要求的话会弹出提示，表单没提交，但这时按钮已经变成不可用了。
请问有其它办法吗？

Answer 1

我是用ajax提交，当用户提交表单的时候把按钮设为disabled，请求http成功后，服务器给客户端响应信息时，再去掉disabled属性。由于你的服务器响应比较慢，最好在请求http的时候，加一个动态效果（比如：加载中...，等等），同样请求成功后隐藏动态效果，个人认为这样给用户的体验感比较好。当然用验证码也可以有效防止表单重复提交。但是看场咯。

Answer 2

button.disabled = true;
$.ajax({...}).done(function () {
    buton.disabled = false;
});

Answer 3

用过一个比较蠢得办法 js中添加一个变量 当点击的时候判断变量的值 点击后这个值变为false 然后直到返回结果或者提示出错 将这个值变成true 下次就可以继续点击了

Answer 4

form上遮个div或者提交按钮disabled,验证失败或提交成功后重置状态

Answer 5

在外部写一个 loading 层的方法，在点击的时候 触发这个方法的 evnet_getLoading 给按钮添加一个loading div，ajax后 在 commple 里面 触发一个 event_cancelLoading 的方法 把 loading div 移除。

Answer 6

1. 前端控制尝试所有验证通过才允许用户做提交处理，第一次提交后设为disable

2. 后端做拦截处理，同一表单较短时间内提交的数据不予处理等等

Answer 7

通过计算两次点击的间隔时间防止用户频繁点击

Answer 8

AJAX获取表单令牌，重复提交的表单令牌会失效，剩下的就后台处理吧，没有表单令牌，或者令牌不对，直接pass

Answer 9

用 cookie 保存上次的提交时间，把间隔时间内的提交过滤掉。

Answer 10

看你是什么机制了，如果只让用户点击一次的话，在用户第一次点击之后对按钮进行一下处理就好了

Answer 11

1、添加Loading效果
2、使用防抖或者变量控制
具体请看我写的文章：https://segmentfault.com/a/11...