我們知道，js有些事件例如resize，mousemove等是會不間斷觸發的，例如我們簡單的一個scroll事件：
function scrollFn(){ console.log(1) } window.onscroll=scrollFn
我們需要在滾動的時候去做一些事情，如上圖可見，我們只是簡單的console，在一次滾動過程中函數即執行了將近20次，如果這個函數有更為復雜的方法，比如操作dom或者其他交互，會嚴重影響性能。為了避免這個問題，我們一般會使用定時器來對函數進行節流。
函數節流的基本思想是設置一個定時器，在指定時間間隔內運行代碼時清楚上一次的定時器，並設置另一個定時器，知道函數請求停止並超過時間間隔才會執行。
在javascript高級程序設計中，定義了一個方法，如下：
function throttle(method,context){ clearTimeout(method.tId); method.tId=setTimeout(function(){ method.call(context) },300) }
throttle函數接收兩個參數，即要執行的函數及執行環境，如果執行環境未定義，默認則為windows。在這個函數中，會在第一次執行時為method頂一個定時器屬性，在指定時間間隔（300）內再次執行時會清楚上一次定義的定時器並創建新定時器知道停止。
function scrollFn(){ console.log(1) } function throttle(method,context){ clearTimeout(method.tId); method.tId=setTimeout(function(){ method.call(context) },300) } window.onscroll=function(){ throttle(scrollFn) }
網上還有一種解決方案：
function throttle(method,delay){ var timer=null; return function(){ var context=this, args=arguments; clearTimeout(timer); timer=setTimeout(function(){ method.apply(context,args); },delay); } }
調用結果和第一種結果相同，都能有效的阻止函數重復調用，不同的是，第一種將定時器設置為函數的一個屬性，而第二種方案通過閉包來實現。首先在函數內定義一個變量timer，然后返回一個函數，我們知道由於在返回函數中包含對timer的引用，因此timer並不會立即被清除。（我們也可以將timer定義為全局變量）。
以上兩種方案存在一個問題，即如果事件一直觸發，那么函數將永遠不會被執行，這在某些時候並不符合我們的需求，可能我們只是想在規定時間內減少函數執行次數，所以對以上函數做如下改進：
function scrollFn(){ console.log(1) } function throttle(method,delay,duration){ var timer=null; var begin=new Date(); return function(){ var context=this, args=arguments; var current=new Date(); clearTimeout(timer); if(current-begin>=duration){ method.apply(context,args); begin=current; }else{ timer=setTimeout(function(){ method.apply(context,args); },delay); } } } window.onscroll=throttle(scrollFn,100,500)
我們在初始的時候定義一個begin開始時間，當時間間隔超過duration時，則執行一次函數，這樣我們做到了不重復調用，又能保證500秒執行一次。