生成器本身不实现无限滚动，仅按需提供分页参数；需结合滚动监听、异步请求与加载状态管理协同工作，它本质是可暂停的分页逻辑编排器。
JavaScript 中生成器本身不直接实现无限滚动加载，它只是提供一种按需生成数据的机制；真正实现无限滚动，需要结合 DOM 事件监听、滚动检测和异步数据获取，生成器可用来管理“下一页数据”的有序供给。
用生成器管理分页请求序列
生成器适合封装分页逻辑，比如每次调用 next() 返回下一页的参数（如 offset 或 page），避免手动维护状态。它不发请求，但能清晰表达“接下来该取哪一页”。
- 定义一个生成器函数，按需产出分页参数：
function* pageGenerator() {
let page = 1;
while (true) {
yield { page, limit: 10 };
page++;
}
}- 配合
fetch使用时，每次滚动触底就调用一次生成器，拿到参数再请求：
const pager = pageGenerator();
async function loadNext() {
const { value } = pager.next();
if (!value) return;
const res = await fetch(`/api/items?page=${value.page}&limit=${value.limit}`);
const items = await res.json();
appendToDOM(items);
}滚动监听 + 触底判断是关键环节
生成器不感知滚动，必须靠 IntersectionObserver 或 scroll 事件判断是否该加载下一页。
- 推荐用
IntersectionObserver监听底部占位元素：
const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) loadNext();
},
{ threshold: 0.1 }
);
observer.observe(sentinel);- 避免频繁触发：加载中加锁（如
loading = true），加载完成再设为false，防止重复请求
生成器 + 异步迭代器增强控制力（可选进阶）
若想让生成器直接返回 Promise（例如封装整个请求过程），可升级为异步生成器（async function*），配合 for await...of 使用：
立即学习“Java免费学习笔记（深入）”；
async function* itemStream() {
let page = 1;
while (true) {
const res = await fetch(`/api/items?page=${page}&limit=10`);
const items = await res.json();
yield items;
page++;
}
}
<p>// 使用方式
for await (const items of itemStream()) {
appendToDOM(items);
if (items.length === 0) break; // 后端无更多数据时终止
}- 注意：异步生成器仍需外部滚动控制，不能自动触发，只是把请求逻辑内聚了
- 实际项目中建议保留加载状态与错误重试机制，生成器只负责“数据流编排”
不推荐的误区
不要把生成器当作“自动滚动加载器”——它没有副作用，不会监听事件、不操作 DOM、也不处理网络错误。把它当成一个智能的、可暂停的分页计算器更准确。
- 混淆概念：生成器 ≠ 加载器，只是协作组件之一
- 忽略节流：即使用了生成器，没做加载锁或防抖，依然可能重复请求
- 忽视边界：后端返回空数组或明确指示“无更多”，应停止生成器消费
