共计 1073 个字符，预计需要花费 3 分钟才能阅读完成。
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;
apply(context, args);
}
}
}// 用 throttle 来包装 scroll 的回调 let better_scroll = throttle(() => {console.log(‘ 触发了滚动事件 ’), 1000});document.addEventListener(‘scroll’, better_scroll);
