JavaScript는 더 많은 콘텐츠를 로드하기 위해 무한 스크롤을 어떻게 구현합니까?

window.addEventListener('scroll', function() {
  // 判断是否已经滚动到页面底部
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // 触发加载更多内容的函数
    loadMoreContent();
  }
});

function loadMoreContent() {
  // 发起 AJAX 请求获取更多的数据
  // 这里只是一个示例，实际情况中需要根据具体需求进行配置
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/getMoreContent', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      // 将新加载的内容插入到页面中
      appendContent(response);
    }
  };
  xhr.send();
}

function appendContent(data) {
  // 将新加载的内容插入到页面中的方法
  // 这里只是一个示例，实际情况中需要根据具体需求进行配置
  var container = document.getElementById('content-container');
  data.forEach(function(item) {
    var element = document.createElement('div');
    element.textContent = item;
    container.appendChild(element);
  });
}

var isLoading = false;

function loadMoreContent() {
  if (!isLoading) {
    isLoading = true;
    // 显示加载动画
    showLoadingAnimation();
    // 发起 AJAX 请求获取更多的数据
    // ...

    // 数据加载完成后更新状态
    // ...
  }
}

function showLoadingAnimation() {
  // 显示加载动画的代码
  // ...
}

function updateLoadingStatus() {
  isLoading = false;
  // 隐藏加载动画
  hideLoadingAnimation();
}