jQuery無限スクロール - スクロールが速いときに複数回イベントが発生する

Question

これは、ページ下部までスクロールするとAJAX関数が起動し、結果が#postswrapper divに追加されるページ。

問題は次のとおりです。ページの下部に到達したときにスクロールすると、AJAXが何回か実行され、#postswrapper divにいくつかの結果セットがロードされます（追加の「不要な」結果の数はすばやくスクロールして追加のスクロールイベントをいくつ発生させたか）。

最終的には、ユーザーが一番下に到達する時間ごとに1組の結果しか提供できません。私はタイマーなどを追加しようとしましたが、無駄です。明らかに、追加のスクロールアクションを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に戻され、より多くのリクエストがトリガーされます。