无限滚动问题

I'm using jQuery to implement a so-called 'infinite scroll' effect on my webiste. Its currently working fine, but I have a concern. That is, although the database row is over, if the scroll bar reaches downward, it continues to grab data, which is, in this case, data that doesn't exist. What I want is, once the database row ends, it should not get data even if the scroll bar reaches down.

<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>

I think you can try this

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

Make a check before calling for more data (instead of just hiding the button)

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');
        }
    }
};