Javascript 自动加载更多帖子（检查元素是否在屏幕上可见）

此功能检测元素在屏幕上是否可见。当用户滚动到“load”元素时，我希望自动请求显示更多的帖子（AJAX）。但是，目前我有以下代码：

    function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

  var scrolledCounter = 0;

  setInterval(function(){
    var scroll = isScrolledIntoView(".button.load-more");
    if(scroll==true){
      scrolledCounter++;
      loadMorePosts(scrolledCounter);
    }
  },500);

函数是crolledintoview（elem）
{
变量$elem=$（elem）；
变量$window=$（window）；
var docViewTop=$window.scrollTop（）；
var docViewBottom=docViewTop+$window.height（）；
var elemTop=$elem.offset（）.top；
var elemBottom=elemTop+$elem.height（）；
返回（（elemBottom=docViewTop））；
}
var scrolledCounter=0；
setInterval（函数（）{
var scroll=isScrolledIntoView（“.button.load more”）；
如果（滚动==真）{
滚动计数器++；
loadMorePosts（滚动计数器）；
}
},500);

它工作得很好，但是如果元素一直在视图中（对于加载信息的较慢ish连接来说也是如此），那么它会每隔500毫秒加载更多的元素。我想知道有什么方法比setInterval（？）更好来完成我想做的事情

i、 e

如果用户滚动到load元素，函数

loadMorePosts

只被调用一次，然后如果它不再可见，则重新允许再次调用该函数，这样，如果它再次可见，该函数将再次被调用。

您可以使用

$（window）.scroll（）

方法。每次用户滚动页面时都会发生这种情况。 我添加了一个

iscrolling

变量，以防止在一段时间内多次触发

loadMorePosts

var isScrolling = false;

$(window).scroll(function(){
    var scroll = isScrolledIntoView(".button.load-more");
    if (scroll==true && !isScrolling)
    {
      isScrolling = true; // Block this function
      scrolledCounter++;
      loadMorePosts(scrolledCounter);
      setTimeout(function() { isScrolling = false; }, 500); // Unblock the function after 0.5s
    }
});

---

JSFIDLE演示（不带

IsCrolling

）：

！IsCrolling

停止

loadMorePosts

的射击