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)
本文来自博客园,作者:ljyyjj,转载请注明原文链接:https://www.cnblogs.com/ljyyjj/p/11596378.html