本文详解如何在 typescript + react 中通过闭包与 useref 正确实现带事件参数的滚动防抖逻辑，解决因函数重复创建导致闭包变量重置、计数器失效等问题。
本文详解如何在 typescript + react 中通过闭包与 useref 正确实现带事件参数的滚动防抖逻辑，解决因函数重复创建导致闭包变量重置、计数器失效等问题。
在 React 中为 onScroll 等高频事件实现防抖（debounce），常误用闭包方式直接在事件处理器中返回新函数（如 _handleScroll(e)()），但这会导致每次触发都新建闭包作用域——内部状态（如 prev、counter）无法持久化，从而让防抖失效、计数器始终为 1。
根本原因在于：闭包状态必须绑定在组件生命周期内稳定的引用上，而非随每次事件调用动态生成的新函数实例。 每次 onScroll={(e) => _handleScroll(e)()} 都会重新执行 _handleScroll(e)，生成一个全新的闭包函数，其内部 prev、counter 均被初始化，失去状态连续性。
✅ 正确做法是：将防抖所需的状态（时间戳、计数器等）托管给 useRef，确保跨渲染周期持久存在；事件处理器本身保持稳定引用，避免内联函数创建新闭包。
以下是推荐的完整实现：
import { useRef, useCallback } from 'react';
const ScrollContainer = () => {
const scrollHeightRef = useRef<number>(0);
const prevTimeRef = useRef<number | null>(null);
const counterRef = useRef<number>(0);
const handleScroll = useCallback((e: UIEvent<HTMLElement>) => {
e.stopPropagation();
const now = Date.now();
const debounceMs = 500;
// 首次触发或超时后更新
if (!prevTimeRef.current || now - prevTimeRef.current > debounceMs) {
prevTimeRef.current = now;
scrollHeightRef.current = e.currentTarget.scrollTop;
counterRef.current += 1;
console.log('✅ Debounced scroll update:', {
scrollTop: scrollHeightRef.current,
counter: counterRef.current,
timestamp: now,
});
}
}, []);
return (
<div
className="h-full overflow-y-auto"
onScroll={handleScroll} // ✅ 稳定引用，不内联
>
{/* content */}
</div>
);
};
export default ScrollContainer;关键要点说明：
- useRef 托管状态：prevTimeRef、counterRef 等在组件整个生命周期内共享，不受重渲染影响；
- useCallback 保证处理器稳定性：避免 onScroll 属性接收新函数引用，防止子组件不必要的重渲染（尤其当该 div 包含复杂子树时）；
- 事件对象安全使用：e.currentTarget.scrollTop 在事件处理同步执行时完全可用，无需提前捕获；
-
避免常见陷阱：
- ❌ 不要在 onScroll 中写 (e) => handler(e) 内联调用；
- ❌ 不要将防抖逻辑嵌套在返回函数的闭包中（如 () => () => {...}），这会切断状态链；
- ✅ 所有状态变更统一通过 ref.current 进行，符合 React 并发模型下对可变状态的规范用法。
? 补充建议：若需更健壮的防抖控制（如取消待执行任务），可结合 setTimeout + clearTimeout 与 useEffect 清理，但对 scroll 这类持续高频事件，基于时间戳的轻量判断已足够高效且无副作用。
通过以上结构，你既能准确响应滚动位置，又能严格控制状态更新频率，兼顾性能与可维护性。
