JS专题之节流函数

huaixiaoz 发布于2019-08-23 14:01 / 1475人阅读

摘要：一什么是节流节流函数就是让事件处理函数在大于等于执行周期时才能执行，周期之内不执行，即事件一直被触发，那么事件将会按每小段固定时间一次的频率执行。我们通过一个简单的示意来理解节流函数可以用时间戳和定时器两种方式进行处理。

本文共 2000 字，读完只需 8 分钟

上一篇文章讲了去抖函数，然后这一篇讲同样为了优化性能，降低事件处理频率的节流函数。

一、什么是节流？

节流函数（throttle）就是让事件处理函数（handler）在大于等于执行周期时才能执行，周期之内不执行，即事件一直被触发，那么事件将会按每小段固定时间一次的频率执行。

打个比方：王者荣耀、英雄联盟、植物大战僵尸游戏中，技能的冷却时间，技能的冷却过程中，是无法使用技能的，只能等冷却时间到之后才能执行。

那什么样的场景能用到节流函数呢？
比如：

页面滚动和改变大小时需要进行业务处理，比如判断是否滑到底部，然后进行懒加载数据。

按钮被高频率地点击时，比如游戏和抢购网站。

我们通过一个简单的示意来理解：

节流函数可以用时间戳和定时器两种方式进行处理。

二、时间戳方式实现


    正在滑动：0

看时间戳实现版本的效果：

三、定时器方式实现


    正在滑动: 0

看看定时器版实现版本的效果：

三、时间戳和定时器的对比分析

对比时间戳和定时器两种方式，效果上的区别主要在于：

事件戳方式会立即执行，定时器会在事件触发后延迟执行，而且事件停止触发后还会再延迟执行一次。

具体选择哪种方式取决于使用场景。underscore 把这两类场景用 leading 和 trailing 进行了表示。

四、兼容两种方式, underscore 源码实现

underscore 的源码中就同时实现了时间戳和定时器实现方式，在调用时可以自由选择要不要在间隔时间开始时（leading）执行，或是间隔时间结束后（trailing）执行。

具体看伪代码和示意图：


        正在滑动: 0

下面是我画的示意图：

大致总结一下代码对事件处理逻辑的影响：

如果 leading 为真，那么绿色意味着间隔时间的开始会立即执行，第一次触发也会立即执行。

如果 trailing 为真，那么从蓝紫色的竖细线后的剩余事件，会跑一个定时器，定时器在时间间隔结束时再执行一次事件处理函数。

如果 leading 不为真，那么第一次事件触发不会立即执行。

如果 trailing 不为真，最后一次事件触发后，不然再执行一次事件处理函数。

节流和去抖的常见场景

输入框打字输入完后才开始异步请求数据校验内容：去抖

下拉滚动条判断是否到底部，进行懒加载数据：去抖和节流都可以，判断是否到底的方式不同

活动网站、游戏网站，按钮被疯狂点击：节流

六、总结

去抖和节流函数都是为了降低高频率事件触发的事件处理频率，从而优化网页中大量重绘重排带来的性能问题。

其区别在于去抖会在高频率事件触发时，只执行一次，节流会在满足间隔时间后执行一次。去抖的 immediate，节流中的 leading, trailing 都是为了尽可能满足这类工具函数的不同使用场景。

GPU云服务器云服务器 js函数节流函数节流专题页专题系列

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

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

JS专题之去抖函数

摘要：如果本次定时器没有被清除，时间到后就会自然执行事件处理函数。绑定去抖后的事件回调函数绑定回调函数的属性方法，点击页面，重置去抖效果异步请求清空上一次事件触发的定时器重置为从而下一次事件触发就能立即执行。一、前言为什么会有去抖和节流这类工具函数？在用户和前端页面的交互过程中，很多操作的触发频率非常高，比如鼠标移动 mousemove 事件, 滚动条滑动 scroll 事件, 输...

ivydom 2019-08-23 13:57 评论0 收藏0
JavaScript专题系列20篇正式完结！

摘要：写在前面专题系列是我写的第二个系列，第一个系列是深入系列。专题系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 评论0 收藏0
JavaScript专题之跟着 underscore 学节流

摘要：关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。 JavaScript 专题系列第二篇，讲解节流，带你从零实现一个 underscore 的 throttle 函数前言在《JavaScript专题之跟着und...

JerryC 2019-08-20 17:22 评论0 收藏0
JavaScript专题系列文章

摘要：专题系列共计篇，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究专题之函数组合专题系列第十六篇，讲解函数组合，并且使用柯里化和函数组合实现模式需求我们需要写一个函数，输入，返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 ext...

Maxiye 2019-08-21 17:57 评论0 收藏0