jQuery Infinite Scroll - 当滚动速度很快时事件触发多次

Question

好的，下面的代码“工作”，当你滚动到页面底部时，AJAX函数被触发，结果被附加到#postswrapper div上页。

问题是：如果我滚动的速度非常快，当我到达页面底部时，AJAX会多次触发并将几组结果加载到#postswrapper div中（另外的“不需要的”结果的数量由通过快速滚动来触发多少额外的滚动事件）。

最终，每次用户到达底部时，我只需要提供一组结果。我试过添加计时器等，但无济于事。很明显，在DOM中存储额外的滚动操作，然后按顺序将它们触发。

任何想法？

我正在使用jquery.1.4.4.js，如果这有助于任何人。无论如何，在这种情况下，e.preventDefault（）不起作用。

$(window).scroll(function(e) { 
    e.preventDefault(); 
    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) { 
     $('div#loadmoreajaxloader').show(); 
     $.ajax({ 
      cache: false, 
      url: 'loadmore.php?lastid=' + $('.postitem:last').attr('id'), 
      success: function(html) { 
       if (html) { 
        $('#postswrapper').append(html); 
        $('div#loadmoreajaxloader').hide(); 
       } else { 
        $('div#loadmoreajaxloader').html(); 
       } 
      } 
     }); 
    } 
}); 

Answer 1

尝试存储某种数据来存储页面当前是否正在加载新项目。也许是这样的：

$(window).data('ajaxready', true).scroll(function(e) { 
    if ($(window).data('ajaxready') == false) return; 

    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) { 
     $('div#loadmoreajaxloader').show(); 
     $(window).data('ajaxready', false); 
     $.ajax({ 
      cache: false, 
      url: 'loadmore.php?lastid=' + $('.postitem:last').attr('id'), 
      success: function(html) { 
       if (html) { 
        $('#postswrapper').append(html); 
        $('div#loadmoreajaxloader').hide(); 
       } else { 
        $('div#loadmoreajaxloader').html(); 
       } 
       $(window).data('ajaxready', true); 
      } 
     }); 
    } 
}); 

发送Ajax请求权之前，一个标志被清除标志着该文件还没有准备好更多的Ajax请求。一旦Ajax成功完成，它会将标志设置为true，并且可以触发更多的请求。