摘要：总结下来，所谓的节流，是通过在一段时间内无视后来产生的回调请求来实现的。直到一段时间到了，第一次触发的事件对应的回调才会执行，而一段时间内触发的后续的回调都会被节流阀无视掉。
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);
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101278.html
摘要：今天和别人聊到函数的节流和防抖，发现自己对这两个的区别很是模糊，遂小小实践一下，在此记录，希望对需要的人有所帮助。防抖实现顺利，但是两个节流方法的执行结果存在差异。 今天和别人聊到JavaScript函数的节流和防抖，发现自己对这两个的区别很是模糊，遂小小实践一下，在此记录，希望对需要的人有所帮助。 节流 - 频繁操作，间隔一定时间去做一件事 举例说明：假定时间间隔为 500ms，频繁...
摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。 原博客地址，欢迎star 函数防抖和节流 函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...
摘要：节流分流，与防抖去抖实现原理相似。本文主要讨论节流，镜像文章防抖理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解节流防抖的读者能够有针对性地，逐一掌握它们。上方为未节流模式，每一次触发都会绘制一个圆点。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 节流(分流)，与防抖（去抖）实现原理相似。本文主...
摘要：函数节流和去抖的出现场景，一般都伴随着客户端的事件监听。函数节流的核心是，让一个函数不要执行得太频繁，减少一些过快的调用来节流。 概述 也是好久没更新 源码解读，看着房价蹭蹭暴涨，心里也是五味杂陈，对未来充满恐惧和迷茫 ...（敢问一句你们上岸了吗） 言归正传，今天要介绍的是 underscore 中两个重要的方法，函数节流和函数去抖。这篇文章不会涉及具体的代码实现（关于代码实现请期...
摘要：函数节流的原理函数节流的原理挺简单的，估计大家都想到了，那就是定时器。在高级程序设计一书有介绍函数节流，里面封装了这样一个函数节流函数，它把定时器存为函数的一个属性个人的世界观不喜欢这种写法。 什么是函数节流？ 介绍前，先说下背景。在前端开发中，有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定mousemove），这种事件有一个特点，就是用户不必特地捣乱...
阅读 3176·2021-11-18 10:02
阅读 1412·2021-10-12 10:08
阅读 1124·2021-10-11 10:58
阅读 1244·2021-10-11 10:57
阅读 1136·2021-10-08 10:04
阅读 2092·2021-09-29 09:35
阅读 752·2021-09-22 15:44
阅读 1249·2021-09-03 10:30
