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);

它工作正常，但如果元素一直在视图中（因为它将用于加载信息的慢速连接），则它每500ms加载更多。我想知道什么方法比setInterval（？）更好地完成我想做的事情。

即

如果用户滚动到load元素，函数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 DEMO（不含isScrolling）：http://jsfiddle.net/0wbf9dn2/

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

1 个答案: