Lodash debounce结合useEffect时函数未执行的修复方法咨询

核心问题 #

你现在的代码只是通过_debounce()创建了一个防抖函数，但没有执行这个函数，所以test123永远不会被调用。另外，每次组件渲染时，useEffect都会重新创建一个新的防抖函数，这会导致防抖逻辑失效，达不到预期效果。

修复步骤 #

• 执行防抖函数：调用_debounce()返回的函数，才会触发后续的test123执行。
• 缓存防抖函数：用useCallback或useMemo缓存防抖后的函数，避免每次渲染都重新创建，保证防抖逻辑的一致性。
• 清理副作用：在useEffect的清理函数中取消防抖，防止组件卸载后还执行回调，避免内存泄漏。

完整修复代码 #

import { useEffect, useCallback } from 'react';
import _debounce from 'lodash/debounce';

function App() {
  function test123() {
    console.log('т12');
  }

  // 用useCallback缓存防抖函数，依赖项为空则只创建一次
  const debouncedTest = useCallback(
    _debounce(() => test123(), 1000),
    []
  );

  useEffect(() => {
    // 执行防抖函数
    debouncedTest();

    // 清理函数：取消防抖
    return () => {
      debouncedTest.cancel();
    };
  }, [debouncedTest]); // 将缓存的防抖函数作为依赖项

  return <div>测试防抖</div>;
}

export default App;

关键说明 #

• useCallback缓存防抖函数，确保每次渲染时使用的是同一个防抖实例，避免频繁创建导致防抖失效。
• 必须调用debouncedTest()才能触发防抖逻辑，否则只是定义了函数却没有执行。
• 清理函数中调用debouncedTest.cancel()，可以在组件卸载或useEffect重新执行前取消未触发的防抖回调，避免不必要的执行。

内容的提问来源于stack exchange，提问作者Виктория