• (O)JS高阶函数应用——函数节流


       在一些函数需被频繁调用的场景,如:window.onresize、mousemove、scroll滚动事件、上传进度等等,操作频繁导致
    性能消耗过高,而造成浏览器卡顿现象,我们可以通过函数节流的方式解决此问题。
       比如我们在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);

     转载请注明文章出处:http://www.cnblogs.com/jacksplwxy/p/6719606.html

  • 相关阅读:
    字典操作
    集合操作
    字符编码与转码
    基于Vue的WebApp项目开发(二)
    算法之递归
    webpack学习(一)
    基于Vue的WebApp项目开发(一)
    webpack踩坑之旅
    vue2.0中的watch和计算属性computed
    vue2.0路由写法、传参和嵌套
  • 原文地址:https://www.cnblogs.com/jacksplwxy/p/6719606.html
Copyright © 2020-2023  润新知