节流

xcold 发布于2019-08-23 14:52 / 989人阅读

摘要：总结下来，所谓的节流，是通过在一段时间内无视后来产生的回调请求来实现的。直到一段时间到了，第一次触发的事件对应的回调才会执行，而一段时间内触发的后续的回调都会被节流阀无视掉。

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);

云服务器 GPU云服务器函数节流节流保存字节流节流阀

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101278.html

JavaScript 函数节流 throttle 和防抖 debounce

摘要：今天和别人聊到函数的节流和防抖，发现自己对这两个的区别很是模糊，遂小小实践一下，在此记录，希望对需要的人有所帮助。防抖实现顺利，但是两个节流方法的执行结果存在差异。今天和别人聊到JavaScript函数的节流和防抖，发现自己对这两个的区别很是模糊，遂小小实践一下，在此记录，希望对需要的人有所帮助。节流 - 频繁操作，间隔一定时间去做一件事举例说明：假定时间间隔为 500ms，频繁...

mmy123456 2019-08-22 15:50 评论0 收藏0
彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
节流 - 理解，实践与实现

摘要：节流分流，与防抖去抖实现原理相似。本文主要讨论节流，镜像文章防抖理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解节流防抖的读者能够有针对性地，逐一掌握它们。上方为未节流模式，每一次触发都会绘制一个圆点。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 节流(分流)，与防抖（去抖）实现原理相似。本文主...

layman 2019-08-26 13:41 评论0 收藏0
JavaScript 函数节流和函数去抖应用场景辨析

摘要：函数节流和去抖的出现场景，一般都伴随着客户端的事件监听。函数节流的核心是，让一个函数不要执行得太频繁，减少一些过快的调用来节流。概述也是好久没更新源码解读，看着房价蹭蹭暴涨，心里也是五味杂陈，对未来充满恐惧和迷茫 ...（敢问一句你们上岸了吗）言归正传，今天要介绍的是 underscore 中两个重要的方法，函数节流和函数去抖。这篇文章不会涉及具体的代码实现（关于代码实现请期...

ZHAO_ 2019-08-21 14:35 评论0 收藏0
JS进阶篇--JS函数节流（throttle）

摘要：函数节流的原理函数节流的原理挺简单的，估计大家都想到了，那就是定时器。在高级程序设计一书有介绍函数节流，里面封装了这样一个函数节流函数，它把定时器存为函数的一个属性个人的世界观不喜欢这种写法。什么是函数节流？介绍前，先说下背景。在前端开发中，有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定mousemove），这种事件有一个特点，就是用户不必特地捣乱...

cpupro 2019-08-20 16:41 评论0 收藏0
详谈js防抖和节流

摘要：本文会分别介绍什么是防抖和节流，它们的应用场景，和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。本文由小芭乐发表 0. 引入首先举一个例子：模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：没有防抖 ...

shevy 2019-08-23 13:54 评论0 收藏0