一, 快速多次点击, 重复提交 ----(ajax 同步)
我尝试过很多解决方法:
1, 按钮点击之后变灰
javascript 代码
- $('#saveBtn').click(function () {
- $(this).attr('disabled', 'disabled');
- //do something
- });
当双击时还是重复提交请求.
2, 用变量标识
javascript 代码
- var saveFlag = 0;
- $('#saveBtn').click(function(){
- if(saveFlag == 0){
- saveFlag = 1;
- //do something
- }
- });
当双击时还是重复提交请求.
以上都是很常用的防止重复提交的方法, 真是要崩溃了, 然后想到了双击事件.
点击事件发生的先后顺序:
单击: mousedown, mouseup, click
双击: mousedown, mouseup, click, mousedown, mouseup, click, dblclick
然后就做了一个测试:
javascript 代码
- $('#saveBtn').click(function () {
- console.log(1);
- });
- $('#saveBtn').dblclick(function () {
- console.log(2);
- });
双击时运行结果: 1 1 2
果然, 双击时触发了两次 click 事件, 因此借鉴网上的方法进行改进如下:
javascript 代码
- // 定义 setTimeout 执行方法
- var timeFn = null;
- $('#saveBtn').click(function () {
- btnClickFn(this);
- });
- $('#saveBtn').dblclick(function () {
- btnClickFn(this);
- });
- function btnClickFn(_this) {
- clearTimeout(timeFn);
- timeFn = setTimeout(function(){
- $(_this).attr('disabled', 'disabled');
- //do something
- },300);
- }
来源: http://www.qdfuns.com/article/27377/6ccca16da61f2b5c52f67d042b3ed2ef.html