你不知道的函数节流，提高你的lJS性能！

Posted 2020-08-24 漆黑小T

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

};