如何有效避免按钮在短时间内被连续多次点击的问题？

本文共计1450个文字，预计阅读时间需要6分钟。

导语：随着接手的项目的增多，许多项目都面临着相似的问题，而每次处理都采用一种固定的方法。有时某些方法并不那么优雅，甚至有些冗余。因此，自己也想尝试探索不同的方法。

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

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

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的重置，总觉的很啰嗦。