關於js中連續click時不執行訪問後臺請求,當點選停止2s之後,立即發起訪問後臺的請求的解決方案
阿新 • • 發佈:2018-12-22
防止使用者重複向後臺發起大量請求,下面我們通過一個例子實現:
當連續點選修改溫度的值時,頁面上顯示的值每次都根據具體情況做出修改,但是將這個值儲存的資料庫的操作則是在點選操作結束後2s發起的(其中若連續多次點選改變溫度的值,則只是在使用者最後一次修改完成後2s執行儲存到資料庫的操作)
點選按鈕如圖:
處理流程圖:
演算法分析
*按鈕的動作主要負責:1.當沒有計時時開啟計時2.當已經存在計時是將計時歸0,並重新開始計時
*計時器方法的主要負責:保證計時器執行,當計時達到2時,執行訪問資料庫的業務方法並關閉計時器。
程式碼實現:
var baseTime=0; var timer="";//定時器標識 function timedCount(flag){ if(flag=="true"){ //按鈕點選事件點選執行的程式碼塊 baseTime=0; clearInterval(timer);//清除原有的計時器 timer=setTimeout("timedCount('false')",1000);//引數位false表示計時器一直執行 }else if(flag=="false"){//計時器自己呼叫的程式碼塊負責一直讓baseTime累加 baseTime=baseTime+1; timer=setTimeout("timedCount('false')",1000); if(baseTime>3){ excuChangeTemp(object);//執行業務方法 clearInterval(timer); } } }
程式碼實現中引數flag的作用:當是點選事件的方法呼叫該計時器時,flag=”true”,當定時器自己遞迴呼叫自己的時候,flag=”false”;