debouncing 与 throttling

一个使用场景：
某些浏览器事件可能会在短时间内高频触发，比如：整窗口大小或滚动页面。
如果给窗口滚动事件添加一个事件监听器，然后用户不停地快速滚动页面，那你的事件可能在短短数秒之内被触发数千次。这会导致非常严重的性能问题。
所以如果功能涉及滚动事件，窗口调整事件，或者键盘事件鼠标事件等，你可能需要警觉起来，是否有必要使用 debouncing 或者 throttling 来提高页面速度与性能。

Debouncing（防抖动）

概念

debouncing（防抖动）是解决上述问题的一个方案，它的做法是 限制下次函数调用之前必须等待的时间间隔，也就是说：强制一个函数在某个连续时间段内只执行一次，哪怕它本来会被调用多次。正确实现 debouncing 的方法是：将若干个函数调用合并为一次，只有在空闲时间大于或等于给定值的时候，才执行调用方法。

实现

简单的实现一个 debounce 方法，接收两个参数，一个是需要防抖动的函数 fn,另一个是延迟时间delay

funciton debouncing(fn, delay) {
    let timer; //定时器
    return function() { 
        // 保存函数调用时的上下文和参数，传递给 fn
        const context = this;
        const args = arguments;
        
        clearTimeout(timer);
        
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    }
}

该 debounce 的使用方法如下：

$(document).on('keyup', debounce(function(e) {
    // 代码
}, 250))

Throttling（节流阀）

概念

throttling（节流阀）则是另一种解决问题的方案，它的做法是固定一段时间内函数调用的频率，它与 debouncing 最大的不同之处在于，throttling 会保证至少调用一次。

实现

与 debounce 类似，接收两个参数，一个是需要截流的函数 fn， 另一个是函数执行间隔阈值 threshhold。

function throttle(fn, threshhold) {
    let timer; //定时器
    let last; //记录上次时间
    threshhold || (threshhold = 250); //默认间隔为250ms    
    return function() {
        // 保存函数调用时的上下文和参数，传递给 fn
        var context = this;
        var args = arguments;
        
        let now = +new Date();
        
        // 如果上次调用距本次调用的时间间隔不够，则不执行 fn，并重新计时
        if(last && now < last + threshhold){
            clearTimeout(timer);
            
            // 保证在当前时间区间结束后，再执行一次 fn
            timer = setTimeout({
                last = now;
                fn.apply(context, args);
            }, threshhold);                
        } else {  //如果时间间隔够了，则立刻执行 fn
            last = now;
            fn.apply(context, args);
        }   
}

throttle使用方法如下：

$(document).on('mouvemove', throttle(function(e) {
    // 代码
}, 250))

总结

debouncing 和 throttling 的区别还是很明显的：前者把一段时间的多次调用合并成一次，后者把一段时间的多次调用减少为数次。下图的展示十分便于理解。

相关文章：
实例解析防抖动（Debouncing）和节流阀（Throttling)