防止连续点击提交按钮,重复往数据库插入相同记录,在前端发请求之前拦截。 新建一个js文件
clickThrottle.js
/* 防止重复点击 */
let clickTimer = 0
function clickThrottle() {
var interval = 3000;//3秒钟之内重复点击只算一次点击
let now = +new Date(); // 获取当前时间的时间戳
let timer = clickTimer; // 记录触发事件的事件戳
if (now - timer < interval) {
// 如果当前时间 - 触发事件时的事件 < interVal,那么不符合条件,直接return false,
// 不让当前事件继续执行下去
return false;
} else {
// 反之,记录符合条件触发了事件的时间戳,并 return true,使事件继续往下执行
clickTimer = now;
return true;
}
}
在需要的地方进行调用:
if(!clickThrottle()) return;
控制逻辑就是在3秒钟之内多次点击,只有一次有效。这里的时间根据实际情况进行调整即可。
----------------------------------------------------------分割线---------------------------------------------------------
下面记录另外一种实现方法:
在点击事件对应的js方法中获取到当前点击元素
在发送ajax请求前将点击的元素(按钮)置为不可用状态
在请求完成后,将点击元素(按钮)状态置为可用
完成代码示例
function submitSupEditPage () {
var _this = this;
$.ajax({
type: "post",
url: url,
cache: false,
async: false,
data: $("#WSFrom").serialize(),
beforeSend:function(){
$(_this).prop('disabled',true);
},
success: function (data) {
//to do
},
complete:function(){
$(_this).prop('disabled',false);
}
});
}