js 上拉加载更多 请求多次

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));

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));

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

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

<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>