无限 Ajax jQuery 错误在窗口滚动时加载更多（重复数据）问题

Question

I asked the question yesterday, I had good answers but it didn't solve my question to the best capabilities.

To explain what's happening here, I am building a messaging system.. However! When I load down it duplicates the post continuously and then randomly stops. I'm not entirely sure why. I've tried everything I know but it just isn't working.

$(document).ready(function() {

    var flag = 0;

    $.ajax({
        type: "GET",
        url: "assets/js/ajax/messages.php",
        data: {
            'offset': 0,
            'limit': 6,
            'user_id': <?php echo $User->Id(); ?>
        },
        success: function(data) {
            $('#messages').append(data);
            flag += 3;
        }
    });

    $(window).scroll(function() {
        if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
            console.log('hi!'+ Date.now());
            $.ajax({
                type: "GET",
                url: "assets/js/ajax/messages.php",
                data: {
                    'offset': flag,
                    'limit': 3,
                    'user_id': <?php echo $User->Id(); ?>
                },
                success: function(data) {
                    $('#messages').append(data);
                    flag += 3;
                }
            });
        }
    });
});

Answer 1

Use Socket.io instead of ajax.

But if you want to using this way, I suggest to append and checking the last message's id .

Then query new messages instead of query everything to avoid duplicates data.