js如何防止按钮重复点击

这篇文章主要为大家展示了“js如何防止按钮重复点击”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js如何防止按钮重复点击”这篇文章吧。

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

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>

以上是“js如何防止按钮重复点击”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！