如何判断已遍历完动态加载的全量列表数据？

核心执行逻辑 #

• 每次页面加载新数据后，优先在当前已渲染的DOM中检索目标属性，找到目标则立即终止所有操作。
• 未找到目标时，触发滚动加载下一批数据，重复「检索→滚动加载」的循环，直到确认无更多数据可加载。

判定遍历完成的关键方法 #

针对未知数据总量的无限滚动场景，可通过以下页面/接口特征判断是否已遍历所有数据：

• 监测底部状态提示：多数无限滚动页面会在底部显示加载状态（如「加载中...」），当无更多数据时，该提示会变为「已加载全部内容」或直接隐藏。监听这个元素的文本变化或显示状态，出现结束标识时即可判定遍历完成。
• 对比新增DOM数量：记录每次滚动加载后新增的目标元素数量。如果连续1-2次滚动后，新增元素数为0（需排除网络延迟，可设置2秒左右的等待时长），说明页面已无更多数据可加载。
• 校验滚动位置与页面高度：计算页面总高度document.body.scrollHeight、当前滚动位置window.scrollY + 可视窗口高度window.innerHeight。当滚动至接近底部（如scrollY + innerHeight >= scrollHeight - 10，预留10px误差）时触发加载，若加载后页面总高度未发生变化，即可判定无新数据。
• 检查接口返回状态：若能捕获加载数据的API请求，可直接查看返回结果。如果接口返回空数组，或携带has_more: false这类标识字段，即可终止遍历。

实现注意事项 #

• 滚动触发节流：添加节流逻辑（如滚动停止1秒后再执行加载和检索），避免频繁触发请求导致页面卡顿或接口限流。
• 异常处理：加载数据时若出现网络错误，可重试2-3次，若仍失败则终止遍历并提示用户。
• 内存优化：若数据量极大，已渲染的DOM可能占用过多内存，可在检索完成后移除无需保留的旧DOM，但需确保已完成对这些元素的检索，避免遗漏目标。

内容的提问来源于stack exchange，提问作者BabaYaga