javascript - 自动加载更多帖子(检查元素在屏幕上是否可见)

Question

此函数检测某个元素在屏幕上是否可见。当用户滚动到“加载”元素时，我想自动请求显示更多帖子(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);

它工作正常，但如果该元素始终处于 View 中(因为加载信息的连接速度较慢)，则它会每 500 毫秒加载更多内容。我想知道什么方法比 setInterval (?) 更好来完成我想做的事情。

即

如果用户滚动到加载元素，则函数 loadMorePosts 仅被调用一次，然后如果它不再可见，则重新允许再次调用该函数，这样，如果它再次可见，函数再次被调用。

Answer 1

您可以使用$(window).scroll()方法。每次用户滚动页面时都会发生这种情况。我添加了一个 isScrolling 变量，以防止在一段时间内多次触发 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
    }
});

JSFiddle 演示(不带 isScrolling):http://jsfiddle.net/0wbf9dn2/