js 函数节流

Posted 2020-10-06 骨月枫

　　在JS中，函数的调用大多数都是由用户主动调用触发，但是在有的事件中，比如mousemove、window.onresize、touchmove中，函数的调用次数会非常频繁，从而消耗浏览器大量的内存空间，造成浏览器卡顿甚至假死的问题。所以函数节流的目的就是减少函数在这些事件中的调用次数，从不可控制到可控。

　　函数节流的实现方式有很多中，通用的原理就是使用setTimeout函数，延迟执行事件处理函数，在没有执行这个函数前，再次调用它时都忽略，具体实现方式如下：

/*
 * 节流函数
 * fn 事件中实际需要调用的函数
 * interval    函数最短隔多长时间调用
 * */
var throttle = function(fn , interval){
    var _self = fn ,     timer ,        //定时器
        isFirst = true;        //是否是第一次调用
    return function(){
        var args = arguments ,
            _this = this;
        if(isFirst){            //如果是第一次执行，不需要走定时器
            _self.apply(_this , args);
            return isFirst = false;
        }
        /*从第二次执行就要开始走定时器了*/
        if(timer)    return;            //如果定时器内的函数还未执行return
        timer = setTimeout(function(){        //定时函数
            clearTimeout(timer);
            timer = null;
            _self.apply(_this , args);
        } , interval || 100)
    }
}
//测试
window.onresize = throttle(function(){
    console.log(222);
} , 500);

　　然后可以对比下不使用throttle方法，会发现打印的频率明显的降低

 

 

搞定！！！