1

我正在研究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 内容加载足够快的情况下才会起作用（这不能保证）。

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

4

3 回答 3

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);
于 2013-03-02T21:11:12.820 回答
0

我在想一个 setTimeout 类型的东西可能会起作用，但后来我意识到它只有在 Ajax 内容加载足够快的情况下才会起作用（这不能保证）。

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

于 2013-03-02T21:02:09.433 回答
0

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

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

$(window).scroll(function(){
  clearTimeout(scrolled);
  scrolled = setTimeout(function(){
  //Your function when user stops scrolling
  }, 100);
});
于 2013-03-02T21:58:48.573 回答