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

前言:想必前端小伙伴都遇到过一个问题:点击某个按钮时如果点击的比较快,可能会触发多次。如果查询操作影响还不大,如果是提交操作,那就会有问题了。接下来为大家介绍几种防止重复点击的小妙招。
基础:给请求添加loading效果。这个是网站必备的装逼特效,既能告诉用户系统已经在帮用户搞事情了,又可以防止用户在此期间做其他操作。
进阶(方法1): 使用防抖。

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

建议:第一次点击立即执行,后面的点击每隔一段时间执行一次。(debounce的leading设置为true)

clipboard.png

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

clipboard.png

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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章