节流 - 理解，实践与实现

layman 发布于2019-08-26 13:41 / 915人阅读

摘要：节流分流，与防抖去抖实现原理相似。本文主要讨论节流，镜像文章防抖理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解节流防抖的读者能够有针对性地，逐一掌握它们。上方为未节流模式，每一次触发都会绘制一个圆点。

节流(分流)，与防抖（去抖）实现原理相似。本文主要讨论节流，镜像文章：防抖 - 理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解节流防抖的读者能够有针对性地，逐一掌握它们。
如何用代码实现节流也是一个要点。本文采用循序渐进地方式，先绘制一个案例的流程图，再根据流程图的逻辑编写节流功能代码。

文章包含多个可交互案例，可通过博客原文实时查看案例
同时欢迎订阅我的博客

节流案例

点击运行案例

当鼠标移动时，mousemove事件频繁被触发。上方为未节流模式，每一次mousemove触发都会绘制一个圆点。而下方为节流模式，尽管mosuemove在鼠标移动时被多次触发，但只有在限定时间间隔才会绘制圆点。

理解和实现节流

通过上方案例，可以基本了解节流的作用: 频繁触发的事件，事件处理函数在一定的时间间隔内只执行一次。

不过节流函数是如何做到的？以上方案例为例，绘制其流程图如下。

核心参数:

间隔时长

计时器

根据流程图的思路实现分流函数：

function throttle( func, wait ) {
  let timer

  function throttled( ...args ) {
    const self = this

    if ( timer == null ) {
      invokeFunc()
      addTimer()
    }

    function addTimer() {
      timer = setTimeout( () => {
        clearTimer()
      }, wait )
    }

    function invokeFunc() {
      func.apply( self, args )
    }
  }

  return throttled

  function clearTimer() {
    clearTimeout( timer )
    timer = null
  }
}

接下来，用编写的节流函数实现上方案例

点击运行案例

应用场景

无限的滚动条

点击运行案例

总结

节流和防抖类似，都能有效优化系统性能，不过使用业务场景有所区别：

防抖既可用于在多次触发的事件（如文本框逐个输入文字），也可用于在频繁触发的事件（如调整窗口尺寸）。

节流多只用在频繁触发的事件（如滚动滚动条）上。

感谢你花时间阅读这篇文章。如果你喜欢这篇文章,欢迎点赞、收藏和分享，让更多的人看到这篇文章，这也是对我最大的鼓励和支持！
同时欢迎订阅我的博客

云服务器服务器托管 VUE防抖与节流微服务架构与实践机器学习与业务实践深度学习与理解

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

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

防抖 - 理解，实践与实现

摘要：本文主要讨论防抖，镜像文章节流理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解防抖节流的读者能够有针对性地，逐一掌握它们。防抖是什么结合上方案例，防抖可以理解为多次触发事件后，事件处理函数只执行一次。为了完整阅读体验，欢迎移步到我的博客原文。防抖（去抖），以及节流（分流）在日常开发中可能用的不多，但在特定场景，却十分有用。本文主要讨论防抖，镜像文章：节流 - 理解，...

yangrd 2019-08-26 12:20 评论0 收藏0
节流和防抖动

摘要：起因面试被问到了节流和防抖动自己对这两个的概念比较模糊都不知道回答了什么鬼从语文和英语学起首先先看字面意思节流的意思就是水龙头关小点频率不要那么高防抖动这根弹簧你不要来回蹦了我就要你最后停下来的没有发生形变的那一刻举个例子节流在改变窗口大小起因面试被问到了节流和防抖动, 自己对这两个的概念比较模糊, 都不知道回答了什么鬼从语文和英语学起首先, 先看字面意思:节流(throttl...

hellowoody 2019-08-22 15:41 评论0 收藏0
「中高级前端面试」JavaScript手写代码无敌秘籍

摘要：第一种直接调用避免在不必要的情况下使用，是一个危险的函数，他执行的代码拥有着执行者的权利。来自于此外，实现需要考虑实例化后对原型链的影响。函数柯里化的主要作用和特点就是参数复用提前返回和延迟执行。手写路径导航实现一个new操作符实现一个JSON.stringify 实现一个JSON.parse 实现一个call或 apply 实现一个Function.bind 实现一个继承实现一个J...

Zhuxy 2019-05-23 16:26 评论0 收藏0
JavaScript 设计模式与开发实践读书笔记

摘要：设计模式与开发实践读书笔记最近利用碎片时间在上面阅读设计模式与开发实践读书这本书，刚开始阅读前两章内容，和大家分享下我觉得可以在项目中用的上的一些笔记。事件绑定暂时这么多，以后会不定期更新一些关于我读这本书的笔记内容 JavaScript 设计模式与开发实践读书笔记最近利用碎片时间在 Kindle 上面阅读《JavaScript 设计模式与开发实践读书》这本书，刚开始阅读前两章内容，...

FingerLiu 2019-08-21 10:55 评论0 收藏0