Question

我正在使用Infinite Load（例如Lazy 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);
});

在jQuery中使用Infinite Load并且无法仅将Load函数加载一次

3 个答案: