ajax - 无限滚动问题

Question

我正在使用 jQuery 在我的网站上实现所谓的“无限滚动”效果。它目前工作正常，但我有一个担忧。也就是说，虽然数据库行已经结束，但如果滚动条向下，它会继续抓取数据，也就是在这种情况下，是不存在的数据。我想要的是，一旦数据库行结束，即使滚动条向下，它也不应该获取数据。

<script type="text/javascript">
$(document).ready(function () {
    var message_count = <? php echo $message_count; ?> ;
    var loaded_messages = 0;

    function last_msg_funtion() {
        $('div#more_button').html('<img src="./assets/img/loader.gif">');
        loaded_messages += 10;
        $.get("/flick/load_more_message/" + loaded_messages, function (data) {
            $("#load_more_message").append(data);
        });

        if (loaded_messages >= message_count - 10) {
            $("#more_button").hide();
            //alert('hide');
        }

    };


    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            last_msg_funtion();
        }
    });
});
</script>

Answer 1

我想你可以试试这个

$(window).scroll(function(){
    if(loaded_messages < message_count)
    {
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
            last_msg_funtion();
        }
    }
}); 

Answer 2

在调用更多数据之前进行检查（而不是仅仅隐藏按钮）

function last_msg_funtion() {
    if (loaded_messages < message_count) { // ADDED THIS CHECK
        $('div#more_button').html('<img src="./assets/img/loader.gif">');
        loaded_messages += 10;

        $.get("/flick/load_more_message/" + loaded_messages, function (data) {
            $("#load_more_message").append(data);
        });

        if (loaded_messages >= message_count - 10) {
            $("#more_button").hide();
            //alert('hide');
        }
    }
};