首页 > Web开发 > 详细

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

时间:2017-04-16 20:27:09      阅读:164      评论:0      收藏:0      [点我收藏+]

   在一些函数需被频繁调用的场景,如: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);

 

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

原文:http://www.cnblogs.com/jacksplwxy/p/6719606.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!