前端js防连点整理

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

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

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

四、防连点三种方式:

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

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

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

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

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