javascript之函数节流

应用场景：当浏览器执行resize,mousemove,scroll等事件时，浏览器会不停的执行事件函数，对性能消耗太大，此时我们可以考虑采用函数节流来控制性能消耗。

实现思路：

var throttle=function(fn, interval){
    var __self=fn; //保存需要被延迟执行的函数引用
    var timer=null; //定时器
    var firstTime=true; //是否第一次调用
    return function(){
        var args=arguments;
        var __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)
});

总结：在一些对实时性要求不是太高，并且会频繁执行的场景下面，可以考虑采用函数节流的方式来提升性能。