Throttle

节流(分流)，与防抖（去抖）实现原理相似。本文主要讨论节流，镜像文章：防抖 - 理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解节流防抖的读者能够有针对性地，逐一掌握它们。 如何用代码实现节流也是一个要点。本文采用循序渐进地方式，先绘制一个案例的流程图，再根据流程图的逻辑编写节流功能代码。文章包含多个可交互案例，可通过博客原文实时查看案例。欢迎Star和订阅我的原创前端技术博客。节流案例点击运行案例当鼠标移动时，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 }}接下来，用编写的节流函数实现上方案例点击运行案例应用场景无限的滚动条点击运行案例总结节流和防抖类似，都能有效优化系统性能，不过使用业务场景有所区别：防抖既可用于在多次触发的事件（如文本框逐个输入文字），也可用于在频繁触发的事件（如调整窗口尺寸）。节流多只用在频繁触发的事件（如滚动滚动条）上。感谢你花时间阅读这篇文章。如果你喜欢这篇文章,欢迎点赞、收藏和分享，让更多的人看到这篇文章，这也是对我最大的鼓励和支持！ 欢迎Star和订阅我的原创前端技术博客。