JS中防抖與節流函數

      在進行窗口的resize、scroll，輸入框內容校驗等操作時，如果事件處理函數調用的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。此時我們可以採用debounce（防抖）和throttle（節流）的方式來減少調用頻率，同時又不影響實際效果。

函數防抖（Debounce）

定義：多次觸發事件後，事件處理函數只執行一次，並且是在觸發操作結束時執行。

原理：對處理函數進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。

//防抖函數
function debounce(fn,wait){
	var timer;
	return function(){
		if(timer){
            //再次觸發清除定時器
			clearTimeout(timer);
		};
		timer = setTimeout(function(){
			fn.handle();
		},wait);
	}
}

function handle() {     
 
  //執行函數
} 
window.addEventListener('scroll', debounce(handle, 1000));

函數節流（Throttle）

防抖有一個問題，那就是如果事件一直在觸發，那麼執行函數永遠都得不到執行。這種情況下，函數節流此時是較好的方法。它與防抖最大的區別就是，無論事件觸發多麼頻繁，都可以保證在規定時間內可以執行一次執行函數。

function throttle(fn,wait){
	var lastTime = new Date().getTime();
	return function(){
		var curTime = new Date().getTime();
		if((curTime - lastTime) < wait){return;};
		lastTime = curTime;
		fn.handle();
	}
}