1 // fn是我们需要包装的事件回调, delay是时间间隔的阈值
2 function throttle(fn, delay) {
3 // last为上一次触发回调的时间, timer是定时器
4 let last = 0, timer = null
5 // 将throttle处理结果当作函数返回
6
7 return function () {
8 // 保留调用时的this上下文
9 let context = this
10 // 保留调用时传入的参数
11 let args = arguments
12 // 记录本次触发回调的时间
13 let now = +new Date()
14
15 // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
16 if (now - last < delay) {
17 // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
18 clearTimeout(timer)
19 timer = setTimeout(function () {
20 last = now
21 fn.apply(context, args)
22 }, delay)
23 } else {
24 // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
25 last = now
26 fn.apply(context, args)
27 }
28 }
29 }
30
31 // 用新的throttle包装scroll的回调
32 const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)
33
34 document.addEventListener('scroll', better_scroll)
原文链接:https://segmentfault.com/a/1190000020494696