前端防止按钮被多次重复点击

多次重复点击会造成前端显示出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);}}); }