防抖

防抖的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。

继续讲司机开车的故事。这次的司机比较有耐心。第一个乘客上车后，司机开始计时（比如说十分钟）。十分钟之内，如果又上来了一个乘客，司机会把计时器清零，重新开始等另一个十分钟（延迟了等待）。直到有这么一位乘客，从他上车开始，后续十分钟都没有新乘客上车，司机会认为确实没有人需要搭这趟车了，才会把车开走。

我们对比 throttle 来理解 debounce：在throttle的逻辑里，“第一个人说了算”，它只为第一个乘客计时，时间到了就执行回调。而 debounce 认为，“最后一个人说了算”，debounce 会为每一个新乘客设定新的定时器。

我们基于上面的理解，一起来写一个 debounce：

// fn是我们要包装的回调函数事件，delay每次等待都执行时间
function debounce(fn, delay) {

// 定时器；
let timer = null;

return function() {
    // 保存上下文的this
    let context = this
    // 保存传入的参数
    let args = arguments;
    // 每次调用前都清空定时器
    if (timer) {
        clearTimeout(timer)
    }
   // 去设立一个新的定时器
   timer = setTimeout (function() {
        fn.apply(context, args);    
   }, delay)
}

}
// 用throttle来包装scroll的回调
let better_scroll = debounce(() => {console.log('触发了滚动事件'), 1000});
document.addEventListener('scroll', better_scroll);