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


Posted in Javascript onApril 22, 2019

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

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

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的重置,总觉的很??隆R裁话旆ê煤玫某槔氤隼础#?S:能力有限,自己也没有想到比较好的办法在上层优雅的封装出来)

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>

以上所述是小编给大家介绍的对于防止按钮重复点击的尝试详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
JavaScript 数组的 uniq 方法
Jan 23 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
node使用request请求的方法
Dec 20 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 #Javascript
详解Vue依赖收集引发的问题
Apr 22 #Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 #Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 #Javascript
深入理解vue中的slot与slot-scope
Apr 22 #Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 #Javascript
详解50行代码,Node爬虫练手项目
Apr 22 #Javascript
You might like
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Python错误处理操作示例
2018/07/18 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python csv模块使用方法代码实例
2019/08/29 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
python3的pip路径在哪
2020/06/23 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
python中温度单位转换的实例方法
2020/12/27 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
网络编辑岗位职责范本
2014/02/10 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
元旦寄语大全
2014/04/10 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
校园文明倡议书
2014/05/16 职场文书
胡桃夹子观后感
2015/06/11 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书