前端js防连点整理

一、前景:
在研发过程中,经常因为网络等问题,用户多次点击,导致产生不必要的数据,影响后续操作,故在前端我们可以使用js来控制重复点击

二、设置防连点目的:
跟根源杜绝提交多次表单,从而造成不可挽回的错误
防止点击太快造成假数据

三、防连点场景分析
数据提交(用户填写数据后,验证完毕后,将数据提交给后端)
登录验证(用户填写完信息,验证完用户身份后,登录操作)
单页面的多个数据提交按钮(某个页面上有多个表单提交的需求,这时候设置点击的开关需要区分)

四、防连点三种方式:

  • 固定时间,比如固定2秒的时间,两秒之后方可进行下一次点击【固定时间不是很灵活、看需求】

  • 等待返回结果之后方可进行第二次点击【若是没有返回结果的话,用户就无法进行点击了】

  • 等待返回结果,设置开关可进行第二次点击,与此同时设置定时器,超过5秒或一个固定时间将开关放开【防止没有返回结果的情况】

1、固定时间,放开开关
在这里插入图片描述
2、等待返回结果再放开开关
在这里插入图片描述
3、两种结合
在这里插入图片描述

发布了11 篇原创文章 · 获赞 0 · 访问量 457

猜你喜欢

转载自blog.csdn.net/weixin_44258964/article/details/105372250
今日推荐