前端函数防抖（Debounce）实践

理解函数防抖的概念

函数防抖（Debounce）是一种优化高频触发事件的技术，通过延迟执行函数，直到事件停止触发后的指定时间间隔。如果在这段时间内再次触发事件，则重新计时。典型的应用场景包括搜索框输入联想、窗口大小调整和按钮防重复点击等。

实现基础防抖函数

以下是一个基本的防抖函数实现，利用 setTimeout 延迟执行目标函数，并在每次触发时清除之前的计时器：

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

使用时，只需将目标函数作为参数传入：

const handleInput = debounce(() => {
  console.log('Input value processed after 300ms delay');
}, 300);

document.querySelector('input').addEventListener('input', handleInput);

立即执行版本

某些场景需要在首次触发时立即执行函数，后续触发才延迟。以下是改进版：

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

调用示例：

const handleClick = debounceImmediate(() => {
  console.log('Button clicked!');
}, 500, true);

document.querySelector('button').addEventListener('click', handleClick);

结合事件对象的使用

若需保留事件对象（如 event），可通过传递参数实现：

const handleScroll = debounce(function(event) {
  console.log('Scroll event:', event);
}, 200);

window.addEventListener('scroll', handleScroll);

防抖在React中的应用

在React组件中，防抖可用于优化频繁的状态更新。以下是一个搜索框组件的例子：

import React, { useState } from 'react';

function SearchBox() {
  const [query, setQuery] = useState('');

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

  return (
    <input
      type="text"
      onChange={(e) => {
        setQuery(e.target.value);
        handleSearch(e.target.value);
      }}
      value={query}
    />
  );
}

性能优化与注意事项

• 内存泄漏：组件卸载时需清除计时器（React示例中可在 useEffect 清理函数中处理）。
• 延迟时间选择：根据场景平衡响应速度与性能（如搜索建议建议200-500ms）。
• this绑定问题：使用箭头函数或 .apply 确保上下文正确。

通过合理使用防抖技术，可以有效减少不必要的计算和网络请求，提升用户体验和性能。