jQuery AJAX在滚动时加载数据，但在触底时出现故障

Question

每当用户点击页面底部（这些页面是PHP文件）时，我都在使用JQuery将数据从另一个文件加载到页面上。

但是，当没有剩余数据时（例如，当显示了数据库中所有请求的数据时），并且用户滚动到底部时，它开始出现毛刺，并无缘无故地不断在页面上上下移动

为什么会这样？

jQuery：

                $(document).ready(function() {
                    var count = ($(".data").length + 10);
                    $(window).scroll(function() {
                        if($(window).scrollTop() == $(document).height() - $(window).height()) {
                            // This loads ten more pieces of data
                            $("#data").load("data.php?v=" + count)
                        }
                    });
                });

Data.PHP

<?php

session_start();

include_once 'db.php';

$v = $_GET['v'];

$username = $_SESSION['username'];

echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var count = ($(".data").length + 10);
        $(window).scroll(function() {
            if($(window).scrollTop() == $(document).height() - $(window).height()) {

                   $("#data").load("data.php?v=" + count)
            }
        });
    });
</script>';

$arr = mysqli_fetch_all(mysqli_query($conn, "SELECT * FROM data"));

for ($i = 0; $i < count($arr) && $i < $v; $i++) {
    $id = $arr[$i][0];
    echo functIMadeForDisplayingData($id)
}

MAIN.PHP

<?php

echo "<div id='data'></div>";
echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var count = 10;
        $(window).scroll(function() {
            if($(window).scrollTop() == $(document).height() - $(window).height()) {
                   $("#data").load("data.php?v=" + count)
            }
        });
    });
</script>';