debounce：去抖动
throttle：节流
为什么会出现节流与去抖动？
当我们在搜索框输入关键词进行搜索时，我们并不希望看到每输入一个拼音就向服务器发送一次请求，这样会对服务器造成一定的压力。而这两个词的出现，就是为了缓解这个问题，可以避免事件的频繁出发，也是两种解决方案。
-
debounce：利用定时器，让函数执行延迟固定的时间执行：比如500毫秒，在500毫秒内如果有函数又被调用则删除上一次调用，这次调用500毫秒后执行，如此往复。就是当你停止输入500毫秒后才会执行函数。
debounce(func, wait) {
// wait：500ms；func：被频繁触发的事件
let timeout;
return function () {
let context = this;
let args = arguments;
let later = () => {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
},
-
throttle：会预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
// 方法一
function throttle(method, delay, time) {
var timeout, startTime = +new Date();
return function() {
var context = this,
args = arguments,
curTime = +new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if (curTime - startTime >= time) {
method.apply(context, args);
startTime = curTime;
} else {
// 没达到触发间隔，重新设定定时器
timeout = setTimeout(method, delay);
}
};
// 方法二
function throttle(fn, gapTime) {
let _lastTime = null
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
_lastTime = _nowTime;
fn.apply(this, arguments)
}
}
}
两者的区别：
拿onscroll事件来说，如果使用的是抖动的话，只用当滚动停止后才会执行回调函数，在滚动的过程是不会执行的；节流不同，滚动的时候每隔一个时间周期就会执行一次回调，然后进入下一个新周期。
具体使用时，需根据具体的业务场景来做选择：
节流：滚动事件、座位图的缩放等；
防抖动：搜索框
参考文章：
js函数节流和去抖动
