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

导语：随着接触的项目增加，很多项目都是遇到同样的问题，而每次都是使用一贯的手法进行处理。有时候有些方法并不是那么的优雅甚至有些冗余，所以自己也想开始尝试不同的方法去解决同样的问题。

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

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;    return target;  };}