当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 23:24:08 HTML5

前言:想必前端的小伙伴们都遇到过一个问题:点击一个按钮的速度快了,可能会触发多次。如果查询操作没有太大影响,如果是提交操作,就会出现问题。接下来,我将介绍几个防止重复点击的小技巧。基础知识:为请求添加加载效果。这是网站必备的造作特效。既可以告诉用户系统已经在为用户做事情,又可以防止用户在此期间进行其他操作。进阶(方法一):使用防抖。防抖:一定时间内,动作只会执行一次(可以使用loadsh的debounce方法,也可以自己写)。举个例子:我在网上买了很多东西,很多快递员今天都会到,时不时会有快递小哥的电话。我不想来回取快递,所以我每隔1小时取一次。如果没有快递,请不要下楼取快递。建议:第一次点击立即执行,后续点击每隔一段时间执行一次。(debounce的leading设置为true)进阶(方法二):变量控制。如果按钮和事件处理在一个组件中,那么我们可以使用变量来控制它。以react为例:推荐使用防抖方式,编写简单,可维护性高。如果你有其他更好的方法,欢迎留言。过几天我会写一篇防抖文章,欢迎关注。