前端js防連點整理

一、前景:
在研發過程中,經常因爲網絡等問題,用戶多次點擊,導致產生不必要的數據,影響後續操作,故在前端我們可以使用js來控制重複點擊

二、設置防連點目的:
跟根源杜絕提交多次表單,從而造成不可挽回的錯誤
防止點擊太快造成假數據

三、防連點場景分析
數據提交(用戶填寫數據後,驗證完畢後,將數據提交給後端)
登錄驗證(用戶填寫完信息,驗證完用戶身份後,登錄操作)
單頁面的多個數據提交按鈕(某個頁面上有多個表單提交的需求,這時候設置點擊的開關需要區分)

四、防連點三種方式:

  • 固定時間,比如固定2秒的時間,兩秒之後方可進行下一次點擊【固定時間不是很靈活、看需求】

  • 等待返回結果之後方可進行第二次點擊【若是沒有返回結果的話,用戶就無法進行點擊了】

  • 等待返回結果,設置開關可進行第二次點擊,與此同時設置定時器,超過5秒或一個固定時間將開關放開【防止沒有返回結果的情況】

1、固定時間,放開開關
在這裏插入圖片描述
2、等待返回結果再放開開關
在這裏插入圖片描述
3、兩種結合
在這裏插入圖片描述

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