虚拟列表需要节流函数以控制滚动事件频率，避免高频触发导致重复计算、频繁重渲染和卡顿；推荐使用尾部执行+时间戳判定的节流方式，绑定到滚动容器并注意清理引用与状态更新时机。
节流函数在虚拟列表滚动中主要用于控制 滚动事件的触发频率，避免因高频 scroll 触发导致的性能问题（比如频繁计算可视区域、更新 DOM、触发重排重绘），同时确保滚动位置变化能被稳定捕获用于更新渲染范围。
为什么虚拟列表需要节流？
原生滚动事件在快速滑动时每秒可能触发数十甚至上百次。虚拟列表依赖滚动位置（scrollTop）实时判断哪些项该渲染、哪些该卸载。若每次 scroll 都立即执行位置计算和状态更新：
- 会造成大量重复计算（如多次调用
Math.floor(scrollTop / itemHeight)） - 可能触发连续的 React 状态更新或 Vue 响应式赋值，引发不必要的 re-render
- 在低端设备上容易出现卡顿或掉帧
如何实现一个适合虚拟列表的节流函数？
推荐使用 尾部执行（trailing）+ 时间戳判定 的节流方式，确保最后一次滚动停顿时也能及时响应（这对“滚动结束加载”或“精准定位”很关键）。不建议使用定时器队列式节流（leading + trailing 混合），易丢失末次位置。
示例（无依赖轻量实现）：
立即学习“Java免费学习笔记（深入）”；
function throttle(func, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}
<p>// 使用
const handleScroll = throttle(() => {
const scrollTop = listRef.scrollTop;
const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight));
const visibleCount = Math.ceil(containerHeight / itemHeight);
setRenderRange([startIndex, startIndex + visibleCount]);
}, 16); // ≈ 60fps，也可设为 32（30fps）更宽松
与 React/Vue 虚拟列表结合的关键细节
-
绑定到容器而非 window：虚拟列表通常有独立滚动容器（如
<div classname="list-container" ref="{listRef}">），scroll 事件要监听该元素，不是全局 window<li> <strong>清理节流函数引用</strong>：组件卸载或列表配置变更时，需移除事件监听，避免内存泄漏（节流函数闭包持有外部作用域）</li> <li> <strong>避免在节流回调里直接 setState（React）或修改响应式数据（Vue）</strong>：可先缓存 <code>scrollTop，再用useEffect或watch做防抖/同步；或确保节流内调用的是 stable callback（如 useCallback 包裹） -
配合 IntersectionObserver 更优？：对静态内容虚拟列表，IntersectionObserver 可替代部分 scroll 计算（如懒加载），但它无法精确获取滚动位置，所以仍需节流 scroll 获取
scrollTop来驱动 range 更新 - 节流时间设太长（如 100ms）：快速滚动时位置更新滞后，出现白屏或错位
- 未考虑 iOS Safari 的非连续 scroll 事件：它会在滚动结束后才批量派发，此时节流可能让首次响应延迟，建议搭配
touchend或scrollend（实验性）补充触发 - 在 resize 或 item 高度动态变化后，未重置节流状态或重新计算 range：需在相关逻辑中手动触发一次更新
