节流(Throttle)

确保在指定的时间间隔内 无论触发了多少次事件 只有第一次事件会被执行 后续在这个时间间隔内都不会被执行(连续触发事件但是在n秒钟只执行第一次触发函数)

核心逻辑

单次执行: 在时间间隔内只执行一次事件处理函数

忽略后续触发:在时间间隔内 后续的事件触发将被忽略

想象一个繁忙的十字路口，交通信号灯每60秒变换一次。不论有多少车辆通过，信号灯都不会更快地变换 这就像节流，无论事件触发的频率多高，每个周期内只执行一次

应用场景

• 监听页面的滚动事件
• 鼠标移动事件
• 用户频繁点击按钮操作
• 游戏中的一些设计

总之 节流可以使密集的事件触发按照一定的频率调用

实现思路

用prev来记录上一次的时间戳

可以用当前时间戳now – prev来记录流逝的时间

如果流逝时间超过了设定时间 则可以调用事件触发的函数 否则无法调用 并且将prev重置为当前时间

源代码如下

给一个具体示例

如图 需求是当我们的鼠标在盒子上一直移动时 每间隔1s显示的数字才+1

节流函数关键点在于prev 和 now时间戳的记录 根据这两个时间节点获得流逝时间判断是否触发函数 而且如果调用 不要忘记重置初始时间 为下一次判断做好准备

简单回顾一下之前提到的防抖

其关键点在于控制定时器的运行与销毁 触发事件后则开启一个定时器 如果在设定时间内再次触发 就看现在还有没有定时器开启 如果有就清除上一个定时器 重新开启一个计时器 直到真正触发函数为止