React useEffect中直接调用setTimeout防抖函数不生效问题排查

核心差异 #

两种写法的本质区别是存放定时器ID的闭包变量是否在多次调用间被持久复用。 #

正常生效的debounce执行逻辑 #

对应代码：

const delayFunc = () => {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => console.log("Hello timer 1"), 2000);
  };
};
const debounce = useCallback(delayFunc(), []);

执行流程：

• 组件首次渲染时，delayFunc()立即执行，生成闭包内持久存在的timer变量，返回真正的防抖执行函数
• useCallback将这个返回的防抖函数缓存，组件重渲染时不会重新创建该函数、也不会重新生成timer变量
• 后续effect触发调用debounce()时，所有访问都指向同一个闭包内的同一个timer，每次触发都能清除上一次注册的定时器，防抖逻辑正常。

失效的delayFunc3执行逻辑 #

对应代码：

const delayFunc3 = useCallback(() => {
  let timer3;
  return function () {
    clearTimeout(timer3);
    timer3 = setTimeout(() => console.log("Hello timeout3"), 2000);
  };
}, []);

// 调用方式
delayFunc3()();

失效原因：

• useCallback仅缓存了外层的工厂函数，组件重渲染时不会重新创建外层函数，但你每次effect触发时都会主动执行一次delayFunc3()
• 每次执行delayFunc3()都会生成全新的执行上下文，创建一个值为undefined的全新timer3变量，再返回一个全新的内部函数
• 紧接着执行返回的内部函数时，clearTimeout(timer3)清除的是刚创建的undefined，根本无法触及上一次执行生成的定时器，旧定时器会正常等待到时间触发打印，防抖完全失效。

修复方案 #

调整delayFunc3的写法，首次渲染时就执行工厂函数，将返回的真正防抖函数交给useCallback缓存，调用时直接执行缓存的防抖函数即可：

// 立即执行工厂函数，拿到防抖函数后再缓存
const delayFunc3 = useCallback((() => {
  let timer3;
  return function () {
    clearTimeout(timer3);
    timer3 = setTimeout(() => console.log("Hello timeout3"), 2000);
  };
})(), []);

useEffect(() => {
  if (event?.length > 0) {
    debounce();
    delayFunc3(); // 直接调用缓存的防抖函数，不需要二次执行
  }
}, [event]);

防抖逻辑生效的核心前提：存储定时器ID的变量必须在多次调用之间共享持久化，不能每次触发都重新生成。

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