你不知道的函數節流，提高你的lJS效能！

標籤：定時器   cal   window   proc   函數   思想   context   on()   自動   

瀏覽器的DOM計算處理非常耗費CPU時間，霸佔記憶體，這對我們的開發來說是非常不友好的，，比如IE瀏覽器的onresize事件就可能在使用者稍微拖動一下視窗時計算上千次，甚至更高頻率直接讓瀏覽器崩潰。。。

手寫過輪播圖的同學都知道節流閥的存在，那麼函數節流亦是如此（參考高程）：

var processor = {

       timeoutId ：null，

       // 實際進行處理的方法

       performProcessing： function（）{

      // 實際執行的代碼

      }，

      // 初始化處理調用的方法

     process：function（）{

        clearTimeout(this.timeoutId);

        var   that=this;

        this.timeoutId=setTimeout(function(){

                that.performProcessing();

        },100);

     }

};

基本思想是：一個連續執行的函數被強制每100毫秒執行一次

下面是用throttle()函數來簡化，可以自動進行定時器的設定與清除：

function throttle(method，context){

         clearTimeout(method,tId);

         method.tId=setTimeout(function(){

                method.call(context);

         },100);

}

怎麼用呢？就是這麼簡單粗暴

function myFunction(){

      //your idea

}

window.onresize = function(){

        throttle(myFunction);

};

 

你不知道的函數節流，提高你的lJS效能！