throttle
创建节流函数,固定时间间隔内最多执行一次。
函数签名
typescript
function throttle<T extends (...args: any[]) => any>(
func: T,
limit: number
): (...args: Parameters<T>) => void参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
func | T extends Function | 是 | 要节流的函数 |
limit | number | 是 | 时间间隔(毫秒) |
返回值
| 类型 | 说明 |
|---|---|
(...args: Parameters<T>) => void | 节流后的函数,接收与原函数相同的参数,但返回值为 void |
工作原理
- 使用闭包保存上次执行时间和定时器 ID
- 返回新函数,每次调用时:
- 获取当前时间
- 计算距离上次执行的时间差
- 如果时间差 ≥ limit:
- 立即执行函数
- 更新上次执行时间
- 如果时间差 < limit:
- 清除之前的定时器
- 设置新定时器,在剩余时间后执行
- 确保在 limit 时间间隔内最多执行一次
节流原理:在固定时间间隔内,不管调用多少次,只执行一次。与防抖的区别是节流会定期执行,而防抖只执行最后一次。适用于滚动事件、鼠标移动、窗口resize等高频触发的场景。