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

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