如何避免使用者多次點選造成的多次請求

2022-07-17 10:24:11 字數 1247 閱讀 5446

還有很多其他的方式進行防止重複點選提交,如
1、定義標誌位:

點選觸發請求後,標誌位為false量;請求(或者包括請求後具體的業務流程處理)後,標誌位為true量。通過標誌位來判斷使用者點選是否具備應有的響應。
2、解除安裝及過載繫結事件:

點選觸發請求後,解除安裝點選事件;請求(或者包括請求後具體的業務流程處理)後,重新載入繫結事件。
3、替換(移除)按鈕dom

點選觸發請求後,將按鈕dom物件替換掉(或者將之移除),自然而然此時不在具備點選事件;請求(或者包括請求後具體的業務流程處理)後,給新的按鈕dom定義點選事件。
不妨引深來看,它不一定發生在表單的提交事件上,同樣可以發生在ajax的非同步請求上。有效地在web客戶端採用一定機制去防止重複點選提交,將大大減輕伺服器端壓力。

那麼,我們就不妨從表單提交及ajax的兩種不同請求的處理過程中,來試試如何防止重複點選提交。

(function($),

complete:function()

success:function(msg)else

}} })

})(jquery)

let timer=null;

$(input).keyup(function()

})},100)

})

從巨集觀意義上講,我們需要對每乙個按鈕去做「防止重複點選提交」,,面對這種情況,我們便可以採用一定策略來對其進行封裝實現(如定義通用按鈕類繫結事件)。

從具體情況上來講,我們並不需要對每乙個按鈕都去做」防止重複點選提交「,僅僅需要對某些可能具有複雜後台業務邏輯、或者檔案上傳、或者呼叫其他非本工程介面導致網路延遲等等情況需要去做」防止重複點選提交「。與此同時,我們必須要給予使用者友好提示(如文字提示、渲染loading條、顯示檔案上傳進度條等等)。兩者需要一起來看、一起來做。當然,我們可以單獨提取狀態顯示這個實現邏輯。**如下:

(function($));

$(document).ajaxstop(function())

})})(jquery)

Vue中實現避免按鈕多次點選造成傳送多次重複請求

store檔案中設定乙個變數,全域性管理按鈕的禁用和解除禁用,方便元件之間的通訊 select.vue傳送表單元件,表單沒有填寫完整時也要將按鈕禁用解除 type primary disabled this.store.state.isdisable click filterbtn form ico...

控制使用者多次點選提交 Ajax

在使用者點選確定後,為防止使用者多次點選,應在使用者點選時加乙個點選事件。點選即觸發 1 前台aspx頁面的html,需要在head中引用js檔案pageajax.js a class btn a id confirm onclick controlconfirm this value 確定 確定 ...

預防 提交 按鈕的多次點選

如何在使用者關掉web瀏覽器視窗前,進行相應的動作 參考 maison blog 長期以來,做web專案,總會頭疼這個問題.使用者不進行登出或者退出功能,直接關閉了瀏覽器.或者使用者在進行輸入操作時,誤點了乙個鏈結,跳轉到其它頁面,造成輸入資料的丟失.今天發現了onbeforeunload事件,它是...