当前位置：首页 > JavaScript

js 实现防抖

2026-03-01 14:43:59JavaScript

防抖的实现原理

防抖（Debounce）是一种优化高频触发事件的技术，确保事件在停止触发一段时间后才会执行回调函数。适用于输入框搜索、窗口大小调整等场景。

js 实现防抖

基础防抖函数实现

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

func: 需要防抖的实际执行函数
delay: 防抖延迟时间（毫秒）
每次调用都会清除之前的定时器，重新计时

立即执行版本

有些场景需要首次触发立即执行，后续触发才防抖：

function debounceImmediate(func, delay, immediate = true) {
  let timeoutId;
  return function(...args) {
    const callNow = immediate && !timeoutId;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      timeoutId = null;
      if (!immediate) func.apply(this, args);
    }, delay);
    if (callNow) func.apply(this, args);
  };
}

TypeScript 实现

增加类型安全的版本：

function debounce<T extends (...args: any[]) => void>(
  func: T,
  delay: number
): (...args: Parameters<T>) => void {
  let timeoutId: ReturnType<typeof setTimeout>;
  return (...args: Parameters<T>) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

使用示例

const handleSearch = debounce((query) => {
  console.log('Searching for:', query);
  // 实际搜索逻辑
}, 500);

document.getElementById('search-input').addEventListener('input', (e) => {
  handleSearch(e.target.value);
});