你不知道的函数节流,提高你的JS性能!

浏览器的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);

};

 

posted @ 2016-12-19 09:47  漆黑小T  阅读(127)  评论(0编辑  收藏  举报