Question

我有这个功能，根据页码加载5个项目。但是发生的事情是，当用户滚动到页面底部时，$ .post函数会触发一次，然后在浏览器弹跳结束时再次触发，因为position_bot == $(document).height()实际上是真的两次。然后每次加载10个项目。

我正试图找到一种忽略浏览器反弹情况的方法，因此调用只会触发一次。任何建议或帮助都会很棒。

$(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);
                });

            }

        }
    });
});

Answer 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（）正在推动屏幕，作为高度的变化，这不足以超越条件的界限。一个简单的布尔值会（或可能）阻止这种情况。它可能需要一些调整，这只是一个基本且完全未经测试的例子。

jQuery无限滚动忽略浏览器反弹

1 个答案: