多次重复点击会造成前端显示出bug,需要判断去过滤掉重复多次的点击。这个有好多种方法,逻辑是不管点几次,间隔一定时间才会去触发一次,只产生一次的记录,也就是弄个定时器。
最直接的方法就是等每次点击过后等所有操作结束后释放变量。但是这个太麻烦了,我自己封装不好,还要看重置太麻烦了,不好用。我还是决定试试在前端加个定时器,设置个时间间隔。
<template>
<button @click="handleClick"></button>
</templage>
<script>
export default {
methods: {
handleClick(event) {
if (this.disabled) return;
if (this.notAllowed) return;
// 点击完多少秒不能继续点
this.notAllowed = true;
setTimeout(()=>{
this.notAllowed = false;
}, this.control)
this.$emit('click', event, this);
}
}
}
</script>
还有个方法就是设置按钮
获取当前点击元素
在发送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);
}
});
}