js函數節流

    咱們知道，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秒執行一次。

 

參考：http://www.cnblogs.com/dolphinX/p/3403821.html