Generator 适合实现无限滚动的懒加载——按需生成数据，避免内存占用；通过 yield 特性配合 IntersectionObserver 实现“滚动到哪、生成到哪”，支持分页式虚拟数据流与状态隔离。
Generator 本身不直接实现无限滚动，但它非常适合做虚拟数据的懒加载——通过按需生成数据，避免一次性创建大量 DOM 或内存占用。
Generator 提供“可暂停”的数据源
无限滚动的核心是“只加载当前可见区域所需的数据”。Generator 的 yield 特性天然匹配这一需求：它不预先计算全部数据，而是在每次调用 next() 时才生成下一项，内存友好、响应及时。
- 适合模拟海量列表（如 100 万条记录），实际只保留在屏+缓冲区的数据
- 配合 IntersectionObserver 触发 yield，做到“滚动到哪、生成到哪”
- 无需维护复杂的状态队列，靠迭代器内部状态自动管理进度
用 Generator 构建分页式虚拟数据流
不是生成所有数据，而是生成“可拉取的批次”。例如每页 20 条，Generator 每次 yield 一个 page 数组：
function* virtualListGenerator(total = Infinity, pageSize = 20) {
let offset = 0;
while (offset < total) {
const page = Array.from(
{ length: pageSize },
(_, i) => ({ id: offset + i + 1, content: `Item ${offset + i + 1}` })
);
yield page;
offset += pageSize;
}
}调用时：const gen = virtualListGenerator(); gen.next().value 返回第一页；再调一次得第二页——完全按需。
立即学习“Java免费学习笔记（深入）”；
结合 DOM 渲染与滚动监听
Generator 不操作 DOM，但可与渲染逻辑解耦协作：
- 用 IntersectionObserver 监听底部占位元素是否进入视口
- 触发时调用 Generator 的 next() 获取新一批数据
- 将新数据 append 到列表末尾（或用虚拟滚动库如 react-window 替换真实 DOM）
- 注意控制“预加载量”，比如提前 2 页触发，避免滚动卡顿
防抖 + 状态控制避免重复请求
滚动频繁触发时，需防止多次 yield 导致重复加载：
- 用布尔标志 isLoading 锁定 generator 调用，next() 完成后再解锁
- Generator 可封装为带缓存的类，已生成的 page 存在 Map 中，重复请求直接返回
- 若需重置（如搜索后刷新），新建 Generator 实例即可，状态隔离干净
Generator 是轻量、可控的数据供给层，把“数据怎么来”和“数据怎么用”分开，让无限滚动更专注在交互与渲染上，而不是数据爆炸。
