技術標籤：JavaScript

函式防抖

原理： 當持續觸發事件時，一定時間段內沒有再次觸發事件,事件處理函式才會執行一次，如果設定的時間到來之前，又觸發了事件，就重新開始延時。

場景：scroll事件持續觸發時，並不持續的觸發事件處理函式，當1000毫秒內沒有觸發scroll事件時，才會延時觸發scrooll事件處理函式。

實現：每次都要清空定時器。重新設定上計時器的值，使得計時器每次都重新開始，直到最後滿足條件並且等待delay時間後，才開始執行fn函式

function debunce (fn, delay) {
		// fn是要傳入的進行防抖處理的函式， delay是等待時間
		var timer = null;
		return function(){
			var _this = this,args = arguments;
			clearTimeout(timer);//每次都有清空定時器
			timer = setTimeout ( function () {
				fn.apply(_this, args);
			} ,delay )
		}
}
 

函式節流

原理：持續觸發事件時，保證一定時間段內只調用一次事件處理函式。

場景：視窗調整（調整大小），頁面滾動（滾動），搶購時瘋狂點選（滑鼠按下）

函式節流主要有兩種實現方法：時間戳和定時器。

		// 時間戳實現
		function throttle（handler，wait）{  //handler是要進行節流的函式，wait是等待時間
            var lastTime = 0;
            return function（）{
                var nowTime = new Date（).getTime（）;    //獲取當前時間
                if（nowTime - lastTime> wait）{
                    handler.apply（this，arguments）;
                    lastTime = nowTime;      //更新最後時間
                }
            }
        }
 

		// 定時器實現
		var throttle = function(func, delay) {            
		    var timer = null;            
		    return function() {                
		        var context = this;               
		        var args = arguments;                
		        if (!timer) {                    
		            timer = setTimeout(function() {                        
		                func.apply(context, args);                        
		                timer = null;                    
		            }, delay);                
		        }            
		    }        
		}