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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM