闭包实现函数节流

在一些业务场景中我们可能会用到window.onresize事件或者mousemove等监控类型事件,当用户做出相关操作的时候,会平凡触发相应的函数,有可能每秒会触发几十甚至上百次,如果函数中有一些DOM操作,就会导致浏览器卡顿等现象,很多时候我们根本不需要执行这么多次,这时我们就需要用到函数节流把多余的执行函数请求给过滤掉

var throttle = function(fn,time){
    var self = fn,
        timer,
        firstTime = true;
    return function(){
        var args = arguments,
            _self = this;
        if(firstTime){ //第一次调用的时候不需要过滤
           self.apply(_self,args);
           return firstTime = false;
        };
        if(timer){ 
           return false;
        };
        timer = srtTimeout(function(){
            clearTimeout(timer);
            timer = null;
            self.apply(_self,args);
        },time || 500);
    };
};

利用延迟和闭包将多余的函数执行请求给过滤掉

window.onresize = throttle(function(){
    //函数逻辑
},300)

 

你可能感兴趣的:(闭包实现函数节流)