无限滚动仅触发一次请求问题求助，恢复后求原因

问题背景 #

我参考教程实现无限滚动功能，仅修改了SQL查询语句和ODBC驱动配置后，发现无限滚动仅向后端发送一次offset和limit参数，后续滚动不再触发请求。但奇怪的是，我没有做任何代码修改，功能又自动恢复正常了，想知道这一问题的可能原因。

相关代码 #

data.php 代码 #

$conn = odbc_connect("Driver=$driver;ServerNode=$host;Database=$db_name;CHAR_AS_UTF8=TRUE;", $username, $password, SQL_CUR_USE_ODBC);
$start = $_POST['start'];
$limit = $_POST['limit'];

$sql = 'SELECT "DocNum", T0."customer" FROM tt WHERE "DocNum" LIKE \'214%\' ORDER BY "DocNum" DESC LIMIT '.$limit.' OFFSET '.$start;
$sql_exec = odbc_exec($conn, $sql);
// echo $sql; // 调试用，建议上线注释
if (odbc_num_fields($sql_exec) > 0) {
    $response = "";
    while($data = odbc_fetch_array($sql_exec)) {
        $response .= '
            <div>
                <h2>'.odbc_Result($sql_exec,1).'</h2>
                <p>'.odbc_Result($sql_exec,2).'</p>
            </div>
        ';
    }
    exit($response);
} else {
    exit('reachedMax');
}

index.html 前端JS代码 #

var start = 0;
var limit = 21;
var reachedMax = false;

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height())
        getData();
});

$(document).ready(function () {
   getData();
});

function getData() {
    if (reachedMax)
        return;

    $.ajax({
       url: 'data.php',
       method: 'POST',
        dataType: 'text',
       data: {
           getData: 1,
           start: start,
           limit: limit
       },
       success: function(response) {
            if (response == "reachedMax")
                reachedMax = true;
            else {
                start += limit;
                $(".results").append(response);
            }
        }
    });
}

可能的原因 #

• ODBC连接临时异常：后端ODBC驱动可能出现短暂的连接不稳定，第一次请求后没有返回足够的数据，导致页面高度没有增加，滚动事件的触发条件不满足。后续连接恢复正常，数据正确返回，页面高度提升，滚动事件就能正常触发。
• 滚动事件判定的精度问题：代码中使用$(window).scrollTop() == $(document).height() - $(window).height()的严格相等判定，部分浏览器在计算滚动像素时会出现小数误差，导致条件不成立。后续页面渲染稳定或者滚动时恰好触发了精确的相等值，功能就恢复了。
• AJAX请求临时阻塞/缓存：第一次请求后可能出现AJAX请求被浏览器缓存、或者网络临时阻塞，导致后续请求无法发送。缓存失效或网络恢复后，请求就能正常发起。
• 数据边界情况：第一次请求返回的数据刚好填满当前窗口，滚动条未出现，自然不会触发滚动事件。后续可能因为窗口大小变化、或者渲染后的页面高度有细微调整，滚动条出现，滚动时就触发了新的请求。

内容的提问来源于stack exchange，提问作者wittream