对于防止按钮重复点击的尝试

导语：随着接触的项目增长，不少项目都是遇到一样的问题，而每次都是使用一向的手法进行处理。有时候有些方法并非那么的优雅甚至有些冗余，因此本身也想开始尝试不一样的方法去解决一样的问题。

我常常在项目中会遇到按钮重复点击后引发表单的重复点击问题。因此针对这个问题，本身尝试了几种办法分别去解决。直接上代码。

1.粗暴简单办法

直接定义一个变量，每次点击事后等全部操做结束后释放变量。或使用loading防止用户点击

//* 部分代码
<script>
export default {
    methods: {
        onSubmit() {
            if (this.lock) return;
            this.lock = true;
            // const load = this.$loading();
            this.$http.create().then((res) => {
                // do something
                this.lock = false;
                // load.close();
            }).catch(() => {
                this.lock = false;
                // load.close();
            })
        }, 
    },
}
</script>
复制代码

这种办法简单粗暴，可是每次须要防止重复点击的地方,都要去关注lock或者loading的重置，总觉的很啰嗦。也没办法好好的抽离出来。（PS:能力有限，本身也没有想到比较好的办法在上层优雅的封装出来）

2.直接把loading放到http请求中去作，统一封装方法

//* 部分代码
...
let load;
http.interceptors.request.use((config) => {
    load = Loading();
    ...
    return config;
}, error => {
    load.close();
    return Promise.reject(error)
});

http.interceptors.response.use((response) => {
    load.close();
    ...
    return response; 
},error => {
    load.close();
    return Promise.reject(error);
});
复制代码

这种办法在实际中也用过了一段时间，一开始挺好用的，可是在后面本身弱网测试的时候发现也是会致使重复点击的状况。并且在有些时候loading图并非全部请求都须要，还要去作个是否显示loading的配置，这样感受http请求又笨重了，也没有让重复点击功能抽离出来。

3.装饰器方法

说到装饰器，最经典的应用场景就是面向切片编程（AOP），《前端经常使用设计模式(1)--装饰器(decorator)》juejin.im/post/5cb415… 作出了很棒的理解与应用。得益于ES7和TS，装饰器在Angular和react中都有不少案例，由于Vue中Class不是必选，因此在Vue中不多看到使用装饰器的，得益于官方有vue-class-component来使用Class进行建立组件的方法，开始了本身的尝试之路。

lock.js

export function lock(target, key, desc) {
    const fn = desc.value;
    //* 没有使用箭头函数是为了让this能指回到vue，这样就能够获取到vue的data，从而作更多的事情，下面会讲到
    desc.value = async function() {
        if (this.$lock) return;
        this.$lock = true;
        /** * await fn.apply(this).catch(() => { * this.$lock = false; * }); * this.$lock = false; */
        await fn.apply(this).finally(() => {
            this.$lock = false;
        })
        return target;
    };
}
复制代码

index.vue

<template>
    <!-- do something -->
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import { lock } from './lock';

@Component
export default class extends Vue {
    @lock
    async onSubmit() {
        await this.$http.create();
        // do something
    }
}
</script>
复制代码

感受这样就彻底抽离了重复点击的功能（PS：好像是这样的），也能独立测试，想在哪里用就在哪里用。感受不足的是，装饰器里须要让this从新指回vue才能获取到vue的data

4.触类旁通

既然重复点击能够从业务代码中抽离出来，那咱们提交表单的字段验证也就一样能够抽离出来了。（PS：全部UI框架都有成熟的form表单验证组件，就当我是瞎折腾）

validate.js

export function validate(target, key, desc) {
  const fn = desc.value;

  desc.value = async function () {
    const {
      name, phone,
    } = this.data;
    
    if (!name) {
      return confirm('请输入您的姓名');
    }
    if (name.length > 20) {
      return confirm('您的姓名不能超过20个字');
    }
    if (!phone) {
      return confirm('请输入您的电话');
    }
    if (!((/^\d{11}$/.test(phone)))) {
      return confirm('请输入11位的电话号码');
    }
    
    await fn.apply(this);
    return target;
  };
}
复制代码

index.vue

<template>
    <!-- do something -->
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import { validate } from './validate';

@Component
export default class extends Vue {
    data = {
        name: '',
        phone: '',
    }
    
    @validate
    async onSubmit() {
        await this.$http.create();
        // do something
    }
}
</script>
复制代码

5.防抖方法（补充）

有小伙伴说可使用防抖，我的以为仍是须要看场景，这里也就列出防抖的方法。

防抖方法是一个很好限制重复事件频繁触发的，常常用在scroll、resize事件上，也能够尝试用在重复点击上面。可是若是点击事件后须要有异步处理，单单使用防抖方法也会没办法限制弱网（PS：吐槽一下成都地铁上移动常常网络很差）下重复点击的状况。如：防抖时间为1秒，可是请求花掉了2秒才返回数据给前端进行处理，中间产生了时间差，致使用户有时间重复点击。因此我的以为仍是须要配合其它办法。一样列出防抖的列子：

throttle.js

const throttle = function(fn, wait, scope) {
    clearTimeout(throttle.timer);
    throttle.timer = setTimeout(function() {
        fn.apply(scope);
    }, wait);
};
复制代码

index.vue

<template>
    <!-- do something --> </template>
<script>
export default {
    onSubmit() {
        throttle(() => {
            this.$http.create().then((result) => {
                // do something
            });
        }, 1000);
    },
};
</script>
复制代码

小结：

本文主要是让本身，经过某个功能对本身代码进行review和重实现来提升代码质量，但愿各位大佬多多指点。下面是个人微信号，但愿和你们多多交流学习。（添加微信请注明来意谢谢！）