javascript - 滚动到页面底部运行功能 - 功能运行次数过多。

Question

我正在尝试构建一个函数，当您滚动到页面底部时，它会运行一个函数以在页面上加载更多项目。

我首先放入一个没有内容的 div

<div id="loadMore"></div>

然后我在这里找到了另一个查看滚动的函数

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    console.log(docViewTop, docViewBottom, elemTop, elemBottom);
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function() {   

    if(isScrolledIntoView($('#loadMore')))
    {
        alert("reached");
        return false;

    }    
});

一个问题是警报似乎到达得太快，另一个主要问题是它多次将“到达”警报返回到屏幕 - 这显然很糟糕，因为我只希望该功能运行一次......

然后它将加载其他内容，如果再次到达页面底部，则该功能(例如警报)将再次运行

我这样做是最好的方法吗？谁能帮忙？

谢谢

Answer 1

在使用滚动功能时，您需要小心，因为每 像素滚动一次就会触发一次事件。因此，您需要使用超时来仅在滚动停止时调用该函数。

试试这个例子:

let $window = $(window);
let scrollTimer = null;

let isScrolledIntoView = (elem) => {
  let $elem = $(elem);
  let docViewTop = $window.scrollTop();
  let docViewBottom = docViewTop + $window.height();
  let elemTop = $elem.offset().top;
  let elemBottom = elemTop + $elem.height();

  console.log(docViewTop, docViewBottom, elemTop, elemBottom);
  return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function() {
  clearTimeout(scrollTimer);

  scrollTimer = setTimeout(function() {
    if (isScrolledIntoView($('#loadMore'))) {
      console.log("'Reached' element is visible");
    }
  }, 100);
});

.spacer {
  height: 2000px;
  border-left: 2px solid #C00;
  margin-left: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Scroll down...
<div class="spacer"></div>
<div id="loadMore">Reached</div>
<div class="spacer"></div>

请注意，将操作延迟到重复滚动完成后的模式称为“去抖动”。