函数节流和分时函数

１.函数节流

函数的触发不是由用户来控制的，当函数被非常频繁调用时，会造成大的性能问题

• window.onsize事件，这个时间会在窗口改变时频繁调用
• mousemove事件，鼠标移动时会频繁调用
• 上传进度，插件频繁通知js上传进度
  基本思路是，按照时间段来忽略一些函数调用

var throttle=function(fn,interval){
    var first=true;
    var timer;   //定时器

    return function(){
        var args=arguments;
        var self=this;

        //第一次调用时，无需延时执行
        if(first){
            fn.apply(self,args);
            first=false;
            return;
        }    
    
        //定时器存在时，前一次延时执行还未完成
        if(timer){
            return;
        }

        //延时执行相应函数
        timer=setTimeout(function(){
            fn.apply(self,args);
            clearTimeout(timer);
            timer=null;
        },interval || 500);
    }
}

window.onresize=throttle(function(){
    console.log(1);
},500);

2.分时函数

有些函数确实是用户调用的，但是这些函数会严重影响页面性能，例如需要短时间向页面中大量添加DOM节点，这可能会让浏览器卡顿或者假死。
因此，可以使用一个timeChunk函数，可以将创建节点的工作通过定时器分批进行。

//array为节点数据，fn为创建节点的操作，count为每次创建节点的个数
    var timeChunk=function(array,fn,count){
        var start=function(){
            for(var i=0;i

这样就能每隔200ms创建一批节点，让浏览器有一个缓冲时间。

3.惰性载入函数

在实现通用的浏览器时间绑定函数addEvent时，可以将addEvent设置为一个普通的函数，在第一次调用这个函数时，重写这个函数的内容，来实现惰性加载函数。

var addEvent=function(ele,type,handler){
        if(ele.addEventListener){
            addEvent=function(ele,type,handler){
                ele.addEventListener(type,handler,false);    
            }
        }
        else if(ele.attachEvent){
            addEvent=function(ele,type,handler){
                ele.attachEvent('on'+type,handler);
            }
        }
        else{
            addEvent=function(ele,type,handler){
                ele['on'+type]=handler;
            }
        }

        addEvent(ele,type,handler);
    };