JavaScript 中生成器怎么实现无限滚动加载-js教程-PHP中文网

生成器本身不实现无限滚动，仅按需提供分页参数；需结合滚动监听、异步请求与加载状态管理协同工作，它本质是可暂停的分页逻辑编排器。

javascript 中生成器怎么实现无限滚动加载

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 事件判断是否该加载下一页。

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

推荐用 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 使用：

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; // 后端无更多数据时终止
}</p>