使用Debounce设置500ms延迟后仍多次调用API：输入每个字符均触发API的问题求助

我来帮你搞定这个防抖的问题！你的代码里有两个核心问题，导致API还是会跟着每个输入字符触发：

问题分析 #

1. 防抖函数的闭包陷阱：你在updateDebounceWord里直接引用了外部的word状态，但防抖函数是闭包，它捕获的是函数创建时的word值，而不是最新的输入值。而且每次组件渲染时，updateDebounceWord都会重新创建，之前的定时器根本没法被清除。
2. 防抖函数的引用不稳定：因为updateDebounceWord定义在组件内部，每次组件渲染（比如word变化时）都会生成一个新的防抖函数实例，导致useEffect每次调用的都是新的防抖函数，旧的定时器不会被清理，自然每个字符都会触发API。

修正后的代码 #

咱们调整一下代码结构，解决这两个问题：

// 把防抖函数放到组件外部，避免每次渲染重新创建
function debounce(cb, delay = 500) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      cb(...args);
    }, delay);
  };
}

function YourSearchComponent() {
  const [word, setWord] = useState('');
  const [meanings, setMeanings] = useState([]);
  const [category, setCategory] = useState('en'); // 假设这是你的语言分类状态

  // 使用useCallback包裹防抖后的API调用，确保引用稳定
  const debouncedDictionaryApi = useCallback(
    debounce(async (searchWord) => {
      // 只在输入长度大于1时调用API
      if (searchWord.length <= 1) return;
      
      console.log("API hit for:", searchWord);
      try {
        const data = await axios.get(
          `https://api.dictionaryapi.dev/api/v2/entries/${category}/${searchWord}`
        );
        console.log("Fetched data for:", searchWord);
        setMeanings(data.data);
      } catch (e) {
        console.log("API error:", e);
      }
    }, 500),
    [category] // 依赖category，因为API请求用到了它
  );

  useEffect(() => {
    // 每次word变化时，调用防抖函数并传入最新的word值
    debouncedDictionaryApi(word);
  }, [word, debouncedDictionaryApi]); // 依赖word和稳定的防抖函数引用

  // 渲染搜索框等UI
  return (
    <div>
      <input
        type="text"
        value={word}
        onChange={(e) => setWord(e.target.value)}
        placeholder="输入单词搜索..."
      />
    </div>
  );
}

关键修正点说明 #

• 防抖函数移到组件外：这样它不会随组件渲染重复创建，定时器可以被正确复用和清除。
• 用useCallback保持防抖函数引用稳定：useCallback会缓存函数引用，只有当依赖的category变化时才会重新生成，避免useEffect频繁触发。
• 防抖函数接收参数：直接把当前的word作为参数传入防抖函数，避免闭包捕获旧值的问题，确保API调用时用的是最新的输入内容。
• 明确useEffect的依赖：把word和debouncedDictionaryApi都加入依赖数组，保证状态变化时能正确触发防抖逻辑。

这样调整后，当你输入"hello"时，只有在停止输入500ms后，才会触发一次API调用，完美实现你想要的防抖效果！

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