节流

throttle 的中心思想在于：在某段时间内，不管你触发了多少次回调，我都只认第一次，并在计时结束时给予响应。

先给大家讲个小故事：现在有一个旅客刚下了飞机，需要用车，于是打电话叫了该机场唯一的一辆机场大巴来接。司机开到机场，心想来都来了，多接几个人一起走吧，这样这趟才跑得值——我等个十分钟看看。于是司机一边打开了计时器，一边招呼后面的客人陆陆续续上车。在这十分钟内，后面下飞机的乘客都只能乘这一辆大巴，十分钟过去后，不管后面还有多少没挤上车的乘客，这班车都必须发走。

在这个故事里，“司机” 就是我们的节流阀，他控制发车的时机；“乘客”就是因为我们频繁操作事件而不断涌入的回调任务，它需要接受“司机”的安排；而“计时器”，就是我们上文提到的以自由变量形式存在的时间信息，它是“司机”决定发车的依据；最后“发车”这个动作，就对应到回调函数的执行。

总结下来，所谓的“节流”，是通过在一段时间内无视后来产生的回调请求来实现的。只要一位客人叫了车，司机就会为他开启计时器，一定的时间内，后面需要乘车的客人都得排队上这一辆车，谁也无法叫到更多的车。

对应到实际的交互上是一样一样的：每当用户触发了一次 scroll 事件，我们就为这个触发操作开启计时器。一段时间内，后续所有的 scroll 事件都会被当作“一辆车的乘客”——它们无法触发新的 scroll 回调。直到“一段时间”到了，第一次触发的 scroll 事件对应的回调才会执行，而“一段时间内”触发的后续的 scroll 回调都会被节流阀无视掉。

理解了大致的思路，我们现在一起实现一个 throttle：

// fn是我们要包装的回调函数事件，Interval是我们要传入的时间间隔
function throttle(fn, Interval) {
// 记录上一次调用的时间；

let last = 0;
return function() {
    // 保存上下文的this
    let context = this
    // 保存传入的参数
    let args = arguments;
    // 保存调用时的时间;
    let now = + new Date;
    // 判断上一次调用时间和当前调用时间对比
    if (now - last > Interval) {
    // 更新最后一次调用时间;
        last = now;
        fn.apply(context, args);
    }
}

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