在jQuery中进行无限加载，无法使Load函数仅加载一次

Question

我正在使用Infinite Load （例如，延迟负载）类型的功能，到目前为止是该功能：

$(window).scroll(function() {
       var ScrollPosition = $(window).scrollTop() + $(window).height();
       var LoadMorePosition = $(document).height()-100;
       if( ScrollPosition == LoadMorePosition ) {
           console.log('loading more');
           loadMoreItems();
       }
    });

它在大多数情况下都起作用，除了一旦人们滚动到阈值时， loadMoreItems函数会被调用20-30次。

我当时以为setTimeout类型的东西可能会起作用，但是第二个想法是我意识到只有在Ajax内容加载得足够快时才能起作用（这不能保证）。

我需要的一种方法是检测它们是否达到阈值，然后仅调用一次函数，直到它们再次达到滚动阈值。

Answer 1

您可以这样做：

var loadOnce = function(fn) {
  var loadedPages = {};
  return function(page) {
    var key = 'p'+page;
    if (typeof loadedPages[key] === 'undefined') {
      fn.apply(fn, arguments);
      loadedPages[key] = true;
    }
  };
};

var loader = loadOnce(function(page) {
  /* Ajax Request */
});

// Will only fire the ajax request once:
loader(1);
loader(1);
loader(1);
loader(1);

Answer 2

我当时以为setTimeout类型的东西可能会起作用，但是第二个想法是我意识到只有在Ajax内容加载得足够快时才能起作用（这不能保证）。

然后不要依赖超时，而是在AJAX请求的成功\\完成时重置标志。

Answer 3

AJAX调用的成功部分应设置加载更多内容标志，因此如果没有更多内容，则不要加载更多内容。

对于滚动，设置超时以检测用户何时停止滚动，然后执行显示加载gif并执行ajax的操作，成功后隐藏gif并加载更多：D

$(window).scroll(function(){
  clearTimeout(scrolled);
  scrolled = setTimeout(function(){
  //Your function when user stops scrolling
  }, 100);
});