防抖與節流--我的筆記

在進行窗口的resize、scroll，輸入框內容校驗等操做時，若是事件處理函數調用的頻率無限制，會加劇瀏覽器的負擔，致使用戶體驗很是糟糕。此時咱們能夠採用debounce（防抖）和throttle（節流）的方式來減小調用頻率，同時又不影響實際效果。

防抖：當持續觸發事件時，必定時間段內沒有再觸發事件，事件處理函數纔會執行一次，若是設定的時間到來以前，又一次觸發了事件，就從新開始延時。

function debounce(fn,delay){
    let timer = null 
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) 
    }
}複製代碼

節流：當持續觸發事件時，保證必定時間段內只調用一次事件處理函數。

//setTimeout實現
function throttle(fn,delay){
    	let timer = null
    	return function (){
    		let context = this
    		let args = arguments
    		if(!timer){
    		        timer= setTimeout(()=>{
                            fn.apply(context,args)
                            timer= null
                        },delay)
    		}
    	}

}
//定時器實現    
function throttle(fn,delay){
    	let previous = 0
    	return function (){
    		let now = new Date()
    		let context = this
    		let args = arguments
    		if(now - previous > delay){
    			fn.apply(context,args)
    			previous = now
    		}
    	}

}
複製代碼

區別： 函數節流無論事件觸發有多頻繁，都會保證在規定時間內必定會執行一次真正的事件處理函數，而函數防抖只是在最後一次事件後才觸發一次函數。 好比在頁面的無限加載場景下，咱們須要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操做時纔去請求數據。這樣的場景，就適合用節流技術來實現。