0

我有这个功能可以根据页码一次加载 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);
                });

            }

        }
    });
});
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 回答