防抖节流 (手写)

238 阅读1分钟

函数防抖

单位时间内,频繁触发事件,只会触发最后一次

经典应用场景 : 输入框输入事件 oninput

  • 函数防抖流程:
  1. 声明全局变量timeID存储定时器ID

  2. 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中

  3. 开启本次定时器 image.png

函数节流

单位时间内,频繁触发事件,只会触发一次

经典应用场景 : 滚动条事件 降低高频事件触发频率

  • 函数节流流程:
  1. 声明全局变量记录 本次触发时间

  2. 每一次触发事件的时候 获取当前时间

  3. 判断 当前时间 - 上一次触发事件是否 >= 节流间隔

  4. 存储本次触发事件 用于下一次判断

image.png