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

需求:

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

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

实现方案:

按钮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>
相关推荐
用户480622604141514 小时前
使用uniapp开发微信小程序-框架搭建
微信小程序·uni-app
TttHhhYy16 小时前
uniapp+vue开发app,蓝牙连接,蓝牙接收文件保存到手机特定文件夹,从手机特定目录(可自定义),读取文件内容,这篇首先说如何读取,手机目录如何寻找
开发语言·前端·javascript·vue.js·uni-app
原克技术17 小时前
uniapp验证码
uni-app
web150850966412 天前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
何极光2 天前
uniapp小程序样式穿透
前端·小程序·uni-app
User_undefined2 天前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app
流氓也是种气质 _Cookie3 天前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app
爱笑的眼睛113 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
鱼樱前端3 天前
uni-app框架核心/常用API梳理一(数据缓存)
前端·uni-app