React中如何实现用户停止输入指定时长后再触发onChange事件

核心实现逻辑为引入**防抖（debounce）**机制：设定指定延迟时长（如300ms），每次用户输入触发事件时，先清除上一轮未执行的定时器，再新建定时器等待延迟时长，仅当用户停止输入达到指定时长后，才实际执行搜索跳转逻辑。

实现步骤 #

1. 封装通用防抖函数 #

// func为要延迟执行的目标函数，delay为延迟毫秒数，默认300ms
const debounce = (func, delay = 300) => {
  let timerId;
  return function(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
};

2. 改造原有搜索逻辑与输入绑定 #

以React函数组件为例，需配合useCallback缓存防抖后的搜索函数，避免组件重渲染导致防抖失效：

import { useState, useCallback } from 'react';

const SearchInput = () => {
  const [inputValue, setInputValue] = useState('');

  // 原有搜索跳转逻辑，新增query编码避免特殊字符导致URL解析异常
  const jumpToSearch = (query) => {
    if (query.trim() !== "") {
      const newLink = `/search?query=${encodeURIComponent(query)}`;
      window.location.href = newLink;
    }
  };

  // 缓存防抖后的搜索方法，仅组件初始化时生成一次
  const debouncedSearch = useCallback(debounce(jumpToSearch, 300), []);

  // 输入框change事件回调
  const handleChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    // 触发防抖搜索
    debouncedSearch(value);
  };

  return <input type="text" value={inputValue} onChange={handleChange} placeholder="请输入搜索内容" />;
};

注意事项 #

• 延迟时长可根据业务需求调整，常规搜索场景推荐设置为200~500ms，兼顾用户体验与避免无效跳转
• 如果使用React类组件，可将防抖后的函数挂载到类实例属性上，避免每次render方法执行时重新生成防抖函数导致定时器重置

内容的提问来源于stack exchange，提问作者Pusoy