乐趣区

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

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

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

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

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

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

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

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

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

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

退出移动版