22

さて、以下のコードは、ページの一番下までスクロールすると 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();
                }
            }
        });
    }
});
4

2 に答える 2

48

ページが現在新しいアイテムをロードしているかどうかを保存する何らかのデータを保存してみてください。多分このように：

$(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 に戻され、さらに多くのリクエストをトリガーできるようになります。

于 2011-08-03T20:45:34.920 に答える
0

ええ、変数を作成して ajax が現在スクリプトからさらに多くのデータを取得しているかどうかを示すことができるので、別の ajax リクエストを送信するかどうかを知ることができます。これにより、無限スクロールがはるかにスムーズになり、グリッチが少なくなるため、ユーザーがブレークポイントに到達したときに一度に何度も起動することはありません。

于 2021-07-06T04:01:07.733 に答える