Ajax и Mysqli извлекали содержимое для автоматической загрузки при зависании или зависании прокрутки при повторении

Question

Я пытаюсь создать систему, в которой контент (сообщения) загружается автоматически из MySQL при прокрутке пользователя.Я попытался установить код ajax, но он показывает определенные ошибки.Ниже приведен полный код.

Мой код index.php:

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        var flag = 0;

        $.ajax({
            type: "GET",
            url: "get-data.php",
            data: {
                'offset': 0,
                'limit': 3
            },
            success: function(data){
                $('.thelisting').append(data);
                flag += 3;
            }
        });

        $(window).scroll(function() {

            if($(window).scrollTop() >= ($(document).height() - $(window).height())- 200) {

                $.ajax({
                    type: "GET",
                    url: "get-data.php",
                    data: {
                        'offset': flag,
                        'limit': 3
                },
                success: function(data){
                    $('.thelisting').append(data);
                    flag += 3;
                }
        });

            }
        });
    });

Мой код get-data.php

    if(isset($_GET['offset']) && isset($_GET['offset'])){

        $limit = $_GET['limit'];
        $offset = $_GET['offset'];

        require('connect.php');

        $data = mysqli_query($conn, "SELECT * FROM `posts` LIMIT {$limit} OFFSET {$offset}");
        while($row = mysqli_fetch_array($data)) {
            echo '<div class="blog-spot"><h1>'.$row['posttitle'].'</h1><p>'.$row['postdescription'].'</p><img src="uploads/'.$row['postimagelink'].'"/></div>';
        }

    }

Ошибка, которую я получаю..

1. Когда я использовал следующий код:

           if($(window).scrollTop() >= ($(document).height() - $(window).height())- 200) {
   

Сообщение загружается в формате 1, 2, 3, 4, 5, 6, 4, 5, 6, 10, 11, 12, 10, 11, 12, 16, 17 ... хотя должно быть 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ..и т. д.

Таким образом, вместо загрузки 7, 8, 9 и 13, 14, 15 он повторяет предыдущие 3 поста.Я также пробовал ниже строки, но та же проблема:

            if($('body').height()-200 <= ($(window).height() + $(window).scrollTop())) {

---

И когда я использую код без -200, то есть:

        if($(window).scrollTop() >= $(document).height() - $(window).height()) {

После начальной загрузки он зависает / зависает, я должен изменить размер окна для следующих 3появляется следующий пост, иначе следующие 3 поста не появляются, и отстает более точно, когда в посте есть изображение.Хотя последовательность точна.

Я предпочитаю пункт 1, потому что высота нижнего колонтитула страницы довольно большая.И в пункте 1 нет отставания, он просто загружается плавно, но пропускает 3 альтернативных сообщения и вместо этого повторяет предыдущие 3 сообщения.

Может кто-нибудь помочь мне решить проблему, особенно для пункта 1.

Спасибо