Skip to content

debounce

创建防抖函数,在指定延迟时间内只执行最后一次调用。

函数签名

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

参数

参数名类型必填说明
funcT extends Function要防抖的函数
delaynumber延迟时间(毫秒)

返回值

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

工作原理

  1. 创建闭包保存定时器 ID
  2. 返回新函数,每次调用时:
    • 清除之前的定时器(如果存在)
    • 设置新的定时器
    • 定时器到期后执行原函数
  3. 只有在 delay 时间内没有新调用时,才会执行原函数

防抖原理:每次调用都会重置定时器,只有最后一次调用的定时器会触发。适用于搜索输入、窗口调整、表单自动保存等场景。