使用 JavaScript 实现无限滚动( 三 ) _JavaScript

window.addEventListener("scroll", handleInfiniteScroll);

性能优化由于我们正在使用滚动事件侦听器，因此限制调用次数对我们网页的性能是有益的。我们可以使用节流功能减慢调用次数。

如何使用 JavaScript 实现 Debounce 和 Throttle杰迈玛·阿布2021 年 5 月 3 日

我们将这样定义我们的节流函数：
var throttleTimer;
const throttle = (callback, time) => {
if (throttleTimer) return;
throttleTimer = true;
setTimeout(() => {
callback();
throttleTimer = false;
}, time);
};

然后我们将油门函数传递给handleInfiniteScroll函数
const handleInfiniteScroll = () => {
throttle(() => {
const endOfPage =
window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
if (endOfPage) {
addCards(currentPage + 1);
}
}, 1000);
};

停止无限滚动至此，我们已经设置了函数，以便在到达页面末尾时添加更多内容。现在，让我们确保我们的函数在没有要添加的内容时停止运行，即cardLimit到达时。
首先，让我们定义我们的removeInfiniteScroll函数。在此函数中，我们将从handleInfiniteScroll滚动事件侦听器中删除该函数，并删除加载器 div 。
const removeInfiniteScroll = () => {
loader.remove();
window.removeEventListener("scroll", handleInfiniteScroll);
};

现在我们将修改我们handleInfiniteScroll以考虑是否没有更多内容要添加，即我们在内容的最后一页。
const handleInfiniteScroll = () => {
throttle(() => {
const endOfPage =
window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
if (endOfPage) {
addCards(currentPage + 1);
}
if (currentPage === pageCount) {
removeInfiniteScroll();
}
}, 1000);
};

结论我们终于得到它了！我们已经构建了无限滚动功能的高性能且可访问的实现。

【使用 JavaScript 实现无限滚动】