优雅的防止用户重复点击某个按钮

xuexiangjys 发布于2019-08-23 18:20 / 3117人阅读

摘要：前言想必前端小伙伴都遇到过一个问题点击某个按钮时如果点击的比较快，可能会触发多次。接下来为大家介绍几种防止重复点击的小妙招。这个是网站必备的装逼特效，既能告诉用户系统已经在帮用户搞事情了，又可以防止用户在此期间做其他操作。

前言：想必前端小伙伴都遇到过一个问题：点击某个按钮时如果点击的比较快，可能会触发多次。如果查询操作影响还不大，如果是提交操作，那就会有问题了。接下来为大家介绍几种防止重复点击的小妙招。

基础：给请求添加loading效果。这个是网站必备的装逼特效，既能告诉用户系统已经在帮用户搞事情了，又可以防止用户在此期间做其他操作。

进阶(方法1)：使用防抖。

防抖: 在一定时间内，动作只会执行一次（大家可以使用loadsh的debounce方法，也可以自己写）。举个例子：我在网上买了很多东西，今天很多快递都会到，时不时的就会有快递小哥的电话，我不想来回去取快递，就每隔1个小时取一次，如果1个小时内没有快递，就不下楼拿快递了。

建议：第一次点击立即执行，后面的点击每隔一段时间执行一次。（debounce的leading设置为true）

进阶（方法2）：变量控制。 如果按钮和事件处理在一个组件中，那么我们可以使用变量来控制，以react为例：

建议使用防抖的方式，写法简单，可维护性高。

如果您还有其他比较好的方法，欢迎留言。

过几天会写防抖的文章，欢迎关注。

海外云主机私有云 js按钮不可重复点击如何防止别人ddos上传某个网页防止重复刷新防止重复提交

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105070.html

Android优雅地处理按钮重复点击

摘要：利用处理重复点击响应式地处理按钮点击，利用的操作符，来防止重复点击，相较于第方案来说，此方法更为优雅一些。版权声明：本文已授权微信公众号：Android必修课，转载请申明出处 App中，有很大一部分场景是点击按钮，向服务端提交数据，由于网络请求需要时间，用户很可能会多次点击，造成数据重复提交，造成各种莫名其妙的问题。因此，防止按钮多次点击，是Android开发中一个很重要的技术手...

zero 2019-08-19 11:11 评论0 收藏0
前端干货之JS最佳实践

摘要：避免与进行比较避免推荐与进行比较的代码，可以用以下技术进行替换如果值是一个应用类型，使用操作符，检查其构造函数如果值是基本类型，使用检查其类型如果是希望对象包含某个特定的方法名，则只用操作符确保指定名字的方法存在于对象上。持续更新地址 https://wdd.js.org/js-best-pr... 1. 风格一千个读者有一千个哈姆雷特，每个人都有自己的code style。...

Aceyclee 2019-08-21 14:34 评论0 收藏0