前端防抖功能

前端防抖（Debounce）是指在触发某个事件时，延迟一段时间后再执行函数，如果这段时间内该事件又被触发，则重新计时。常用于避免频繁触发事件，如输入框实时搜索、窗口缩放等，提升性能和用户体验。

防抖函数实现示例（JavaScript）

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

使用示例

// 模拟输入框的输入事件处理
const input = document.querySelector('input');

function handleInput(event) {
  console.log('用户输入内容:', event.target.value);
}

// 包装防抖函数，延迟300毫秒执行
const debouncedHandleInput = debounce(handleInput, 300);

input.addEventListener('input', debouncedHandleInput);

React中防抖示例（使用 Hook）

import React, { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debouncedValue;
}

export default function SearchInput() {
  const [input, setInput] = useState('');
  const debouncedInput = useDebounce(input, 500);

  useEffect(() => {
    if (debouncedInput) {
      // 这里可以执行搜索等操作
      console.log('触发搜索:', debouncedInput);
    }
  }, [debouncedInput]);

  return (
    <input
      value={input}
      onChange={(e) => setInput(e.target.value)}
      placeholder="输入搜索内容"
    />
  );
}