高阶函数(2)

WEB前端 waitig 452℃ 百度已收录 0评论

函数节流

函数的触发不是由用户控制的,有可能频繁触发,就会造成性能问题,如:window.onresize事件,mousemove,上传进度。节流的代码实现由很多种,下面运用setTimeout来延迟一段事件执行。
        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(){//延迟一段时间
                    clearTimeout(timer);
                    timer = null;
                    __self.apply(__me,args)

                },interval || 500)
            }
        }
        window.onresize = throttle(function(){
            console.log(1)
        },500)
        //throttle传入两个参数,一个是需要延迟执行的函数,一个是延迟时间。

分时函数

1秒内向页面插入1000个dom节点,页面很可能会卡顿。解决的办法就是把1s创建1000个改为200ms创建8个。使用timeChunk函数示例如下:
        var timeChunk = function(ary,fn,count){
            var obj,
                t;
            var len = ary.length;
            var start = function(){
                for(var i=0;i<Math.min( count || 1,ary.length);i++ ){
                    var obj = ary.shift();
                    fn(obj)
                }
            }
            return function(){
                t = setInterval(function(){
                    if(ary.length === 0){//如果全部节点已经创建好
                        return clearInterval(t);
                    }
                    start();
                },200)//分批执行时间间隔
            }
        }
        var ary = [];
        for(var i = 1;i<=1000;i++){
            ary.push(i);
        }
        var render = timeChunk(ary,function(n){
            var div = document.createComment('div');
            div.innerHTML = n;
            document.body.appendChild(div);
        },8)
        render()

惰性加载

进入条件分支时,addEvent函数会被重写,下一次进入addEvent时,不在执行里面的分支语句:
        var addEvent = function(elem,type,handler){
            if(window.addEventListener){
                addEvent = function(elem,type,handler){
                    elem.addEventListener(type,handler,false)
                }
            }else if(window.attachEvent){
                addEvent = function(elem,type,handler){
                    elem.attachEvent('on'+type,handler)
                }
            }
            addEvent(elem,type,handler)
        }

本文由【waitig】发表在等英博客
本文固定链接:高阶函数(2)
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)