js 上拉加载更多请求多次

基础概念

上拉加载更多（Infinite Scroll）是一种常见的网页设计模式，用户在滚动页面到接近底部时，会自动加载更多内容。这种设计可以提升用户体验，减少页面刷新次数。

类型

基于滚动事件：监听窗口或容器的滚动事件，当滚动到接近底部时触发加载。
基于Intersection Observer API：使用现代浏览器提供的Intersection Observer API来检测元素是否进入视口。

应用场景

社交媒体动态：如微博、Twitter等。
新闻网站：长文章列表的分段加载。
电商网站：商品列表的无限滚动展示。

问题描述及原因

在JavaScript中实现上拉加载更多时，可能会遇到请求多次的问题。这通常是由于滚动事件被频繁触发导致的。每次滚动事件触发时，都可能会发起一个新的请求，而没有适当的防抖或节流机制。

解决方案

使用防抖（Debounce）或节流（Throttle）

防抖和节流是两种常用的优化高频事件处理的技术。

防抖（Debounce）：在一段时间内，无论触发多少次事件，只有最后一次事件的回调函数会被执行。

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

window.addEventListener('scroll', debounce(() => {
    if (isNearBottom()) {
        loadMoreContent();
    }
}, 200));

节流（Throttle）：在一段时间内，无论触发多少次事件，回调函数只会被执行一次。

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

window.addEventListener('scroll', throttle(() => {
    if (isNearBottom()) {
        loadMoreContent();
    }
}, 200));

使用Intersection Observer API

Intersection Observer API提供了一种更高效的方式来检测元素是否进入视口。

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadMoreContent();
        }
    });
}, { threshold: 0.1 });

observer.observe(document.querySelector('.load-more-trigger'));

示例代码

以下是一个完整的示例，结合了Intersection Observer API和防抖技术：

<div id="content">
    <!-- 初始内容 -->
</div>
<div class="load-more-trigger"></div>

<script>
function loadMoreContent() {
    // 模拟加载更多内容
    console.log('Loading more content...');
    // 实际应用中，这里应该是AJAX请求
}

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadMoreContent();
        }
    });
}, { threshold: 0.1 });

observer.observe(document.querySelector('.load-more-trigger'));
</script>

通过上述方法，可以有效避免上拉加载更多时请求多次的问题，提升用户体验和应用性能。