本文详解如何在 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 这类持续高频事件，基于时间戳的轻量判断已足够高效且无副作用。
通过以上结构，你既能准确响应滚动位置，又能严格控制状态更新频率，兼顾性能与可维护性。