0

ページ番号に基づいて一度に5つのアイテムをロードするこの機能があります。しかし、何が起きているかというと、ユーザーがページの一番下までスクロールすると、$.post 関数が 1 回起動し、ブラウザのバウンスが終了すると再び起動position_bot == $(document).height()します。その後、毎回 10 個のアイテムが読み込まれます。

ブラウザーのバウンス状況を無視して、呼び出しが 1 回だけ発生する方法を見つけようとしています。どんな提案や助けも素晴らしいでしょう。

$(function(){
    $('#loading').show();
    var page = 1,
        total_brands = '<?php echo $brandsCount?>',
        post_link = '<?php echo $brandsUrl?>',
        post_data = {page_num: page};

    $.post(post_link, post_data, function(data){
        $('.brandsResult').append(data);
        $('#loading').hide();
    });

    $(window).scroll(function (e) {

        var position_bot = $(window).scrollTop() + $(window).height(),
            displayed_brands = $('ul.category-list > li').length;               

        // Show loading image if near bottom
        if(position_bot > $(document).height() - 120 && displayed_brands < total_brands) {
            $('#loading').show();
        }

        // If page is at the bottom
        if(position_bot == $(document).height()) {

            // Increase page number
            page++;
            post_data = { page_num: page };
            console.log('page', page);

            // Check if all items are displayed
            if((page-1) * 5 > total_brands){
                $('#loading').hide();
            } else {    
            // Firing twice ???
                $.post(post_link, post_data, function(data){
                    $('#loading').hide();
                    $('.brandsResult').append(data);
                });

            }

        }
    });
});
4

1 に答える 1

1

ブール値を設定して読み込み状態を制御し、真の場合は何もしないようにコードに指示します...

    var processing = false;

if(position_bot == $(document).height() && !processing) {

    if((page-1) * 5 > total_brands){
       $('#loading').hide();
       processing = false;
    } else {    
       processing = true;
       $.post(post_link, post_data, function(data){
           $('#loading').hide();
           $('.brandsResult').append(data);
           processing = false;
       });

    }
}

これは、 $('#loading').show() が画面をプッシュして高さの変化として機能しているため、条件の境界を超えてプッシュするには不十分であると考えられます。単純なブール値は、これを防ぐ (または防ぐことができる) ものです。多少の調整が必要になる場合がありますが、これは基本的なものであり、まったくテストされていない例です。

于 2013-04-10T17:23:14.473 に答える