JS函数节流和函数防抖

Posted 2021-03-03 liuabo

为什么需要函数防抖和函数节流？

• 例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间。连续尝试进行过多的DOM操作可能会导致浏览器挂起，甚至崩溃；
• 例如当调整浏览器大小的时候，resize事件会连续触发；如果在resize事件处理程序内部尝试进行DOM操作，其高频率的更改可能会让浏览器崩溃；
• 为了绕开上面的问题，需要对该类函数进行节流；

什么是函数防抖和函数节流？

防抖（debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。
背后的基本思想是某些代码不可以在没有间断的情况下连续重复执行。

函数防抖 (debounce)

如果一个事件被频繁触发多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数只执行最后触发的一次。
函数防抖可以把多个顺序的调用合并成一次。

函数节流 (throttle)

如果一个事件被频繁触发多次，节流函数可以按照固定频率去执行对应的事件处理方法。
函数节流保证一个事件一定时间内只执行一次。 

函数防抖实现

function debounce(fn, delay, scope) {
    let timer = null;
    // 返回函数对debounce作用域形成闭包
    return function () {
        // setTimeout()中用到函数环境总是window,故需要当前环境的副本；
        let context = scope || this, args = arguments;
        // 如果事件被触发，清除timer并重新开始计时
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}

•  代码解读

第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码；
当第二次调用该函数时，它会清除前一次的定时器并设置另一个；
如果前一个定时器已经执行过了，这个操作就没有任何意义；
然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器；
目的是只有在执行函数的请求停止了delay时间之后才执行。

函数节流实现

function throttle(func,delay){
    var timer = null;
    var startTime = Date.now();

    return function(){
        var curTime = Date.now();
        var remaining = delay-(curTime-startTime);
        var context = this;
        var args = arguments;

        clearTimeout(timer);
        if(remaining<=0){
            func.apply(context,args);
            startTime = Date.now();
        }else{
            timer = setTimeout(func,remaining);
        }
    }
}

总结

• debounce和throttle均是通过减少高频触发事件的实际事件处理程序的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。
• debounce可以把多个顺序的调用合并成一次。
• throttle保证一个事件一定时间内只执行一次。