1. 程式人生 > >關於js中連續click時不執行訪問後臺請求,當點選停止2s之後,立即發起訪問後臺的請求的解決方案

關於js中連續click時不執行訪問後臺請求,當點選停止2s之後,立即發起訪問後臺的請求的解決方案

防止使用者重複向後臺發起大量請求,下面我們通過一個例子實現:

當連續點選修改溫度的值時,頁面上顯示的值每次都根據具體情況做出修改,但是將這個值儲存的資料庫的操作則是在點選操作結束後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;