vue禁止点击事件触发（前端vue中防止用户短时间内多次点击按钮触发点击事件解决方法）
导读：1.按钮点击后添加loading，接口返回成功后再移除loading（经过多次尝试发现，此方法不能完全确保只调用一次接口，第二次添加时仍会多次调用接口），方法如下：...
1.按钮点击后添加loading ，接口返回成功后再移除loading（经过多次尝试发现 ，此方法不能完全确保只调用一次接口 ，第二次添加时仍会多次调用接口） ，方法如下：
html代码：
javascript代码：
<script>
export default {
data() {
return {
onLoading: false,
};
},
methods: {
onSave() {
this.onLoading = true;
let parmas = {
//这里是接口传入参数
};
insert(parmas)
.then((res) => {
if (res.code === 200) {this.$message.success(res.message);
this.onLoading = false;
} else {
this.$message.error(res.message);
this.onLoading = false;
}
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
2.在规定时间内禁用按钮 ，按钮无法点击 ，即实现接口不被多次调用 ，方法如下：
html代码：
<el-button @click="onSave" :disabled="isdisabled">保存</el-button>
javascript代码：
<script>
export default {
data() {
return {
isdisabled: false,
};
},
methods: {
onSave() {
this.isdisabled = true;
//这里使用定时器解除按钮禁用
setTimeout(() => {
this.isdisabled = false;
}, 1500);
let parmas = {
//这里是接口传入参数
};
insert(parmas)
.then((res) => {
if (res.code === 200) {this.$message.success(res.message);
} else {
this.$message.error(res.message);
}
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
3.使用节流函数
节流：是指一种在指定事件防止函数被频繁调用的思想
节流函数：是结合时间戳封装的函数 ，在指定时间内会调用一次方法
html代码：
<el-button @click="getTrottle">保存</el-button>
javascript代码：
<script>
const throttle = (func, wait = 50) => {
//上一次执行该函数的时间
let lastTime = 0;
return function (...args) {
// 当前时间
let now = +new Date();
// 将当前时间和上一次执行函数时间对比
// 如果差值大于设置的等待时间就执行函数
if (now - lastTime > wait) {
lastTime = now;
func.apply(this, args);
}
};
};
export default {
data() {
return {
getTrottle: undefined,
};
},
created() {
this.getTrottle = throttle(this.onSave, 3000);
},
methods: {
onSave() {
let parmas = {
//这里是接口传入参数
};
insert(parmas)
.then((res) => {
if (res.code === 200) {
this.$message.success(res.message);
} else {
this.$message.error(res.message);
}
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
以上就可以实现了 ，如果需要多次使用节流函数 ，也可以封装后再使用：
// 封装节流函数
// 参数:1.回调函数 ，2.时间 ，3.布尔值
// 时间戳: 毫秒值
// 相差的毫秒值 = 结束的时间戳 - 开始的时间戳
function trottle(callback,times,bool) {
// 记录开始的时间戳
var startTime = new Date().getTime();
// 记录布尔值
var fistFlag = bool;
// 返回function函数 (事件函数)
return function() {
// 记录结束的时间戳
var endTime = new Date().getTime();
// 相差的毫秒值
var totalTime = endTime - startTime;
// 记录事件对象
var args = arguments[0];
// 判断布尔值是否为true
if(fistFlag){
if(typeof callback == "function"){
// 调用回调函数
callback(args);
// 设置布尔值为false
fistFlag = false;
// 重置开始的时间戳
startTime = endTime;
}
}
// 判断是否达到指定的时间
if(totalTime >= times){
// 符合条件执行回调函数
if(typeof callback == "function"){
// 调用回调函数
callback(args);
// 重置开始的时间戳
startTime = endTime;
}
}
}
}
以上就是对于用户短时间内多次点击按钮触发点击事件的解决方法 ，哪位小伙伴有其他更简单的方法欢迎评论留言交流哦~
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！