JS高阶函数应用——函数节流

Posted 2020-09-11 jacksplwxy

   在一些函数需被频繁调用的场景，如：window.onresize、mousemove、上传进度等等，操作频繁导致
性能消耗过高，而造成浏览器卡顿现象，我们可以通过函数节流的方式解决此问题。
   比如我们在window.onresize事件中打印当前浏览器窗口的大小，而拉拽窗口的时候，打印窗口大小的
工作1s内进行了10次。而实际是我们只需2次或3次，这就需要我们按时间段来忽略一些事件请求，比如确保
在500ms内只打印1次。实现代码如下：

        var throttle=function(fn,interval){
            var _self=fn,   //保存需要被延迟执行的函数引用
                    timer,  //定时器
                    firstTime=true; //是否是第一次调用
            return function(){
                var args=arguments,
                        _me=this;
                if(firstTime){  //如果是第一次调用，，则不需要延迟执行
                    _self.apply(_me,args);
                    return firstTime=false;
                }
                if(timer){  //如果定时器还在，说明前一次延迟执行还没有完成
                    return false;
                }
                timer=setTimeout(function(){    //延迟500ms执行
                    clearTimeout(timer);
                    timer=null;
                    _self.apply(_me,args);
                },interval||500);
            }
        }
        window.onresize=throttle(function(){
            console.log(1);
        },500);