TypeScript React中闭包结合事件参数实现防抖遇问题求助

你遇到的核心问题是每次滚动事件触发时，都重新创建了一个全新的闭包环境，导致防抖逻辑依赖的prev、counter状态每次都被重置：

• 在不生效的代码里，onScroll={(e) => _handleScroll(e)()} 意味着每滚动一次，就会调用一次_handleScroll(e)，每次调用都会重新初始化prev = Date.now()、counter = 0，然后返回一个新的函数。所以每次执行返回的函数时，都是在新的闭包里，counter自然每次都是1，防抖的时间判断也完全失效。
• 生效的代码里，onScroll={_handleScroll()} 是在组件渲染时就调用_handleScroll()，返回一个固定的函数，这个函数共享同一个闭包的prev和counter，所以状态能持续累计。但这种写法没法拿到滚动事件的参数，也没法执行e.stopPropagation()。

要同时满足保留防抖闭包状态和获取滚动事件参数，你需要让防抖函数本身接收事件参数，并且只创建一次这个防抖函数。以下是两种可行方案：

方案1：使用useRef+useCallback实现（推荐） #

利用useRef存储防抖依赖的状态和定时器，useCallback缓存函数避免重复创建：

import { useCallback, useRef } from 'react';

const YourComponent = () => {
  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const prevTimeRef = useRef<number>(Date.now());
  const counterRef = useRef<number>(0);

  const handleScroll = useCallback((e: UIEvent<HTMLElement>) => {
    e.stopPropagation();
    const now = Date.now();
    const debounce = 500;

    // 防抖核心：每次触发都清除之前的定时器，重置延迟执行
    if (scrollTimeoutRef.current) {
      clearTimeout(scrollTimeoutRef.current);
    }

    scrollTimeoutRef.current = setTimeout(() => {
      if (now - prevTimeRef.current > debounce) {
        prevTimeRef.current = now;
        setScrollHeight(e.currentTarget.scrollTop);
      }
    }, debounce);

    counterRef.current++;
    console.log("@@@", { now, prev: prevTimeRef.current, counter: counterRef.current });
  }, []);

  return (
    <div
      className="h-full overflow-y-auto"
      onScroll={handleScroll}
    >
      {/* 组件内容 */}
    </div>
  );
};

方案2：自执行闭包创建防抖函数 #

通过自执行函数提前创建好防抖函数，确保整个组件生命周期内只有一个闭包环境：

const YourComponent = () => {
  // 自执行函数创建防抖处理函数，只初始化一次
  const debouncedScrollHandler = (() => {
    let prev = Date.now();
    const debounce = 500;
    let counter = 0;

    return (e: UIEvent<HTMLElement>) => {
      e.stopPropagation();
      const now = Date.now();
      // 修正你原来的时间判断逻辑（prev - now会是负数，永远不满足条件）
      if (now - prev > debounce) {
        prev = now;
        setScrollHeight(e.currentTarget.scrollTop);
      }
      counter++;
      console.log("@@@", { now, prev, counter });
    };
  })();

  return (
    <div
      className="h-full overflow-y-auto"
      onScroll={debouncedScrollHandler}
    >
      {/* 组件内容 */}
    </div>
  );
};

• 你原来的时间判断逻辑写反了：prev - now会得到负数，永远无法大于500，需要改为now - prev > debounce。
• 在React中处理防抖/节流时，优先用useRef存储需要持久化的状态（如定时器ID、累计值），避免组件重新渲染导致状态丢失。

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