js 函數節流

標籤：set   div   函數   記憶體   int   apply   timeout   images   size   

　　在JS中，函數的調用大多數都是由使用者主動調用觸發，但是在有的事件中，比如mousemove、window.onresize、touchmove中，函數的調用次數會非常頻繁，從而消耗瀏覽器大量的記憶體空間，造成瀏覽器卡頓甚至假死的問題。所以函數節流的目的就是減少函數在這些事件中的調用次數，從不可控制到可控。

　　函數節流的實現方式有很多中，通用的原理就是使用setTimeout函數，順延強制事件處理函數，在沒有執行這個函數前，再次調用它時都忽略，具體實現方式如下：

/* * 節流函數 * fn 事件中實際需要調用的函數 * interval    函數最短隔多長時間調用 * */var throttle = function(fn , interval){    var _self = fn ,     timer ,        //定時器        isFirst = true;        //是否是第一次調用    return function(){        var args = arguments ,            _this = this;        if(isFirst){            //如果是第一次執行，不需要走定時器            _self.apply(_this , args);            return isFirst = false;        }        /*從第二次執行就要開始走定時器了*/        if(timer)    return;            //如果定時器內的函數還未執行return        timer = setTimeout(function(){        //定時函數            clearTimeout(timer);            timer = null;            _self.apply(_this , args);        } , interval || 100)    }}//測試window.onresize = throttle(function(){    console.log(222);} , 500);

　　然後可以對比下不使用throttle方法，會發現列印的頻率明顯的降低

 

 

搞定！！！

 

js 函數節流