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

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>

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