web-dev-qa-db-ja.com

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

さて、以下のコードは、ページの一番下までスクロールするとAJAX関数が起動され、結果がページの#postswrapperdivに追加されるという点で「機能」します。

問題は、ページの一番下に到達したときに本当に速くスクロールすると、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();
                }
            }
        });
    }
});
jqueryinfinite-scroll
22
Marc

ページが現在新しいアイテムを読み込んでいるかどうかを保存するある種のデータを保存してみてください。多分このように：

$(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に戻り、さらにリクエストをトリガーできます。

47
Matt Bradley