javaScript——函數防抖

什麼是函數防抖

函數防抖代碼

//普通寫法
var timer = null;
var timerFunc = ()=>{
	console.log("移動時間:"+new Date().getTime());
}
function moveFunc(){
	if(null != timer){
		clearTimeout(timer);
	}
	timer = setTimeout(timerFunc,1000);
}

window.addEventListener("mousemove", moveFunc);

//閉包創建私有變量
function timerFunc(){
	console.log("移動時間:"+new Date().getTime());
}

function moveFunc(func,delay){
	var timer = null;
	return () => {
		if(null != timer){
			clearTimeout(timer);
		}
		timer = setTimeout(()=>{
			func.apply(this, arguments)
		} ,delay);
	}
}

window.addEventListener("mousemove", moveFunc(timerFunc,1000));

個人覺得函數防抖比函數節流要難理解一些，所以這裏我多加一個實際應用的場景，便於理解它與函數節流的區別。這裏的目標場景是在一個android手機的登錄頁面,當系統軟鍵盤彈出的時候，會引發整個窗口大小的變化。這個時候，我需要做的就是在整個窗口高度變化的過程結束之後去判斷該執行的步驟，廢話少說，直接看代碼：

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.onresize = function () {
    var nowClientHeight = document.documentElement.clientHeight || 	document.body.clientHeight;
    if (clientHeight > nowClientHeight) {
        //鍵盤彈出的事件處理
        console.log("鍵盤彈出的事件處理")
    }else {
        //鍵盤收起的事件處理
        console.log("鍵盤收起的事件處理")
    }
}

這裏我們打開一個新的瀏覽器窗口（最好是一個空的窗口），打開開發者模式，把窗口調成responsive，如圖（我用的是Google）

然後直接把上面的代碼粘貼進去，再拖動窗口底部來改變窗口高度

效果：

這就是沒加函數防抖的效果，接下來我們再看看加了函數防抖的效果：

function ableChange(func,delay){
    var timer = null;
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    return () => {
        if(null != timer){
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            func.call(this,clientHeight);
        },delay)
    }
}


window.onresize = ableChange(function(clientHeight){
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (clientHeight > nowClientHeight) {
        //鍵盤彈出的事件處理
        console.log("鍵盤彈出的事件處理")
    }
    else {
        //鍵盤收起的事件處理
        console.log("鍵盤收起的事件處理")
    }
},200);

重複上面的步驟，在粘貼代碼的時候用上加了函數防抖的代碼，效果：

函數節流和函數防抖的區別還是挺大的，以我個人的理解，就像一輛列車，如果我想獲取它實時運動的路線，它可能一直在上傳它的位置信息。但是這個沒必要，爲了節約上傳的流量，或者減輕服務器的壓力，這個時候我們就可以用到函數節流，讓它10秒上傳一次。如果我想獲取它達到勻速行駛(這裏假設速度在一分鐘之內沒有變化)時的速度，這個時候就用可以用到函數防抖(過濾掉數值上下變動的狀態,當數值穩定一定時間後再去進行下一步操作)。