一、前言　　

　　DOM的操作比起非DOM的操作需要更多的內存和CPU的使用，連續進行過多的DOM操作會使得瀏覽器掛起。在使用onresize事件處理或者元素綁定拖拽事件中特別容易發生。

函數節流就是解決這種問題一種方法。

二、函數節流

　　函數節流就是使用定時器。當我觸發一個時間時，先setTimout讓這個事件延遲一會再執行，如果在這個時間間隔內又觸發了事件，那我們就clear掉原來的定時器，再setTimeout一個新的定時器延遲一會執行。

三、方法

《JS高程》中封裝的方法：

 function throttle(method, context) {//執行函數、哪個作用域中執行
     clearTimeout(methor.tId);       //定時器的ID儲存在執行函數的tId屬性中，開始時候並不存在
     method.tId = setTimeout(function(){
         method.call(context);   //用call確保程序在適當的執行環境中執行
     }, 100);
 }

 function resizeDiv(){
    	var div = document.getElementById("myDiv");
    	div.style.width = 10 +　"px";
    	console.log(this);
    }

//調用
window.onresize = function(){

    throttle(resizeDiv);
}

還看到有一種封裝的方法

var throttle = function(fn,delay){ //執行函數、延遲時間
    	var timer = null;
    	return function(){
    		var context = this,args = arguments;	
    		clearTimeout(timer);
    		timer = setTimeout(function(){
    			fn.apply(context, args); //用apply把調用throttle時的this上下文傳給執行函數
    		},delay);
    	}
    }
    //調用
    window.onresize  = throttle(resizeDiv,100);
   

四、使用場景

1、onresize事件

2、鼠標拖拽事件

3、點透的處理

。。。

其實，只要代碼是周期性執行的，最好都使用節流。

使用函數節流