0

ユーザーがスクロールしたときにデータベースからアイテムをロードするjQueryスクリプトを作成しました。唯一の問題は、ページの読み込み後にユーザーが非常に速くスクロールすると、スクリプトの結果が2倍になり、データベースからの情報が2回表示されることです。ここで何が起こっているのかよくわかりませんが、スクリプトは以下のとおりです。ちなみに、それはすべてドキュメントの準備ができています。

function last_item_funtion() 
     { 
     var ID=$(".newsItem:last").attr("id");
     $('#feedLoader').html('<img src="../files/images/bigLoader.gif" style="display:block;margin-left:auto;margin-right:auto;">');
     $.post("AJAX/scroll_feed.php?action=get&last_item_id="+ID,

     function(data){
     if (data != "") {
     $(".newsItem:last").after(data); 
     }
     $('#feedLoader').empty();
     });
     }; 

     $(window).scroll(function(){
     if ($(window).scrollTop() == $(document).height() - $(window).height()){
     last_item_funtion();
     }
     });

これは私のjsfiddleではありませんが、スクリプトが何をするかを簡単に示しています。それは私が抱えている問題を示していませんが、データベース全体をjsfiddleに置くことができないため、それを再現することはできません。

更新 プレイした後、ユーザーがページを読み込んだ直後にスクロールしたときではなく、ユーザーが短いスクロールではなく1回連続してスクロールしたときであることに気付きました。このことから、スクロールが停止するまで、jQueryはデータがロードされたことを登録しないと推測しています。

4

2 に答える 2

0

ええと、イベントは複数回発生していると思いますscrollので、リクエストは複数回行われます。次のことを試してください。

function bind_scroll() {
    $(window).bind('scroll', function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $(window).unbind('scroll');
            last_item_funtion();
        }
    });
}

function last_item_funtion() {
    var ID = $(".newsItem:last").attr("id");
    $('#feedLoader').html('<img src="../files/images/bigLoader.gif" style="display:block;margin-left:auto;margin-right:auto;">');
    $.post("AJAX/scroll_feed.php?action=get&last_item_id=" + ID,

    function (data) {
        if (data != "") {
            $(".newsItem:last").after(data);
        }
        $('#feedLoader').empty();
        bind_scroll();
    });
};

bind_scroll();

イベントをバインドし、scrollトリガーされた後にバインドを解除します。リクエストが終了すると、イベントは再びバインドされます。

（ jQuery.one（）もチェックアウトするかもしれませんが、私はこれを使用したことがありません。）

編集： いくつかのテストを行った後、バインドを解除してもスクロールイベントが頻繁にトリガーされるため、グローバル変数を使用してscroll-callbackに既に何かが読み込まれているかどうか、または新しい操作を実行してもよいかどうかを通知する更新された例を次に示します。ポストリクエスト：

window.scroll_loading = false;

function last_item_funtion() {
    var ID = $(".newsItem:last").attr("id");
    $('#feedLoader').html('<img src="../files/images/bigLoader.gif" style="display:block;margin-left:auto;margin-right:auto;">');

    $.post("AJAX/scroll_feed.php?action=get&last_item_id=" + ID,
        function (data) {
            window.scroll_loading = false;
            if (data != "") {
                $(".newsItem:last").after(data);
            }
            $('#feedLoader').empty();
        }
    );
};

$(window).bind('scroll', function () {
    if (window.scroll_loading == true) {
        return;
    }
    if ($(window).scrollTop() > $(document).height() - $(window).height() - 10) {
        window.scroll_loading = true;
        console.log("FIRE!");
        last_item_funtion();
    }
});
于 2012-09-01T01:12:06.177 に答える
0

これをテストしていませんが、これで問題が解決するかどうかを確認してください

$(window).die("scroll").live("scroll",function(){
     if ($(window).scrollTop() == $(document).height() - $(window).height()){
     last_item_funtion();
     }
     });
于 2012-08-31T23:32:25.070 に答える