uniapp实现按钮防重复点击（防抖）完整解决方案

Funky_oaNiu2024-12-24 16:36

需求：

防止用户连续点击按钮，造成短时间内发起多次请求，对后台服务造成压力；

防止第一次请求还没执行完，第二次请求就发起了。

实现方案：

按钮disable禁用+定时器按钮恢复

其中定义disable变量主要是为了保证逻辑的按顺序执行，定时器恢复主要是为了防止按钮重复点击，因为如果请求响应的特别快，用户还是有可能在短时间内执行多次请求，所以二者缺一不可，这才是完美解决方案

关键代码

按钮：

复制代码

<view @click="submit"  :class="{ disabledBtn: isSubmitting }">提交</view>

定义数据：

复制代码

data() {
    return {
      isSubmitting: false,
      }
}

点击事件：

复制代码

submit(){
  // 防抖提交
   if (this.isSubmitting){
     return
   }
   this.isSubmitting = true;
   try {
     // 这是我自己封装的api工具js，可以换成自己的请求，恢复按钮的代码放在请求执行完成之后即可
     this.$u.api.testRequestApi(this.model).then(res => {
       if(res.success){
         uni.showToast({
           title: '操作成功',
           icon: 'none',
           duration: 3000
         });
       }
       setTimeout(() => {
         this.isSubmitting = false;
       }, 1500);
     });
   } catch (error) {
     // 这里不要在finally里写false，因为我们要实现等请求结束后才可以点击下一次
     this.isSubmitting = false;
   }
 },

按钮置灰不可点击（关键）

复制代码

<style lang="scss" scoped>
	.disabledBtn {
	  pointer-events: none;
	  opacity: 0.6;
	}
</style>