Skip to content

throttle

创建节流函数,固定时间间隔内最多执行一次。

函数签名

typescript
function throttle<T extends (...args: any[]) => any>(
  func: T,
  limit: number
): (...args: Parameters<T>) => void

参数

参数名类型必填说明
funcT extends Function要节流的函数
limitnumber时间间隔(毫秒)

返回值

类型说明
(...args: Parameters<T>) => void节流后的函数,接收与原函数相同的参数,但返回值为 void

工作原理

  1. 使用闭包保存上次执行时间和定时器 ID
  2. 返回新函数,每次调用时:
    • 获取当前时间
    • 计算距离上次执行的时间差
    • 如果时间差 ≥ limit:
      • 立即执行函数
      • 更新上次执行时间
    • 如果时间差 < limit:
      • 清除之前的定时器
      • 设置新定时器,在剩余时间后执行
  3. 确保在 limit 时间间隔内最多执行一次

节流原理:在固定时间间隔内,不管调用多少次,只执行一次。与防抖的区别是节流会定期执行,而防抖只执行最后一次。适用于滚动事件、鼠标移动、窗口resize等高频触发的场景。