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

Debouncing（防抖动）

概念

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

实现

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

funciton debouncing(fn, delay) {let timer; //定时器return function() { // 保存函数调用时的上下文和参数，传递给 fnconst 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() {// 保存函数调用时的上下文和参数，传递给 fnvar context = this;var args = arguments;let now = +new Date();// 如果上次调用距本次调用的时间间隔不够，则不执行 fn，并重新计时if(last && now < last + threshhold){clearTimeout(timer);// 保证在当前时间区间结束后，再执行一次 fntimer = setTimeout({last = now;fn.apply(context, args);}, threshhold);                } else {  //如果时间间隔够了，则立刻执行 fnlast = now;fn.apply(context, args);}
}

throttle使用方法如下：

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

总结

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

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