实现一个函数 无限滚动加载

推荐答案

// www.javascriptcn.com code example
function infiniteScroll(loadMore) {
  let isLoading = false;

  window.addEventListener('scroll', () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight - 10 && !isLoading) {
      isLoading = true;
      loadMore().then(() => {
        isLoading = false;
      });
    }
  });
}

// 示例用法
infiniteScroll(() => {
  return new Promise((resolve) => {
    // 模拟异步加载数据
    setTimeout(() => {
      const newContent = document.createElement('div');
      newContent.textContent = 'New content loaded';
      document.body.appendChild(newContent);
      resolve();
    }, 1000);
  });
});

本题详细解读

1. 实现思路

无限滚动加载的核心思想是监听页面的滚动事件，当用户滚动到页面底部时，触发加载更多数据的操作。为了避免频繁触发加载，通常会设置一个标志位 isLoading 来确保在加载过程中不会重复触发加载操作。

2. 代码解析

• infiniteScroll 函数：该函数接受一个 loadMore 回调函数作为参数，loadMore 是一个返回 Promise 的函数，用于加载更多数据。
• isLoading 标志位：用于控制是否正在加载数据，避免重复触发加载操作。
• scroll 事件监听：监听页面的滚动事件，当用户滚动到页面底部时（即 scrollTop + clientHeight >= scrollHeight - 10），触发 loadMore 函数。
• loadMore 函数：在示例中，loadMore 函数模拟了一个异步加载数据的过程，加载完成后将新内容添加到页面中。

3. 关键点

• 滚动位置判断：通过 scrollTop、scrollHeight 和 clientHeight 来判断用户是否滚动到了页面底部。
• 防抖处理：通过 isLoading 标志位来防止在加载过程中重复触发加载操作。
• 异步加载：loadMore 函数返回一个 Promise，确保在加载完成后再进行下一次加载。

4. 适用场景

无限滚动加载通常用于需要动态加载大量数据的场景，如社交媒体、新闻列表、图片墙等。通过这种方式，可以提升用户体验，避免一次性加载过多数据导致的页面卡顿。