Javascript 如何使用Jquery/Ajax处理无限卷轴的页码？

这是我第一次尝试用JQuery/Ajax实现无限滚动。这就是我目前的处境：

<script>
$(document).ready(function() {
    // see if we're at the bottom of the page to potentially load more content
    $(window).on('scroll', scrollProducts);

    function scrollProducts() {
        var end = $("#footer").offset().top;
        var viewEnd = $(window).scrollTop() + $(window).height();
        var distance = end - viewEnd;

        // when we're almost at the bottom
        if (distance < 300)  {
            // unbind to prevent excessive firing
            $(window).off('scroll', scrollProducts);
            console.log('we reached the bottom');

            $.ajax({
                type: 'GET',
                url: "foo/bar/2",
                success: function(data) {
                    console.log("success!");
                    $('#container').append(data).fadeIn();
                    // rebind after successful update
                    $(window).on('scroll', scrollProducts);
                }
            });
        }
    }
});
</script>

$（文档）.ready（函数（）{
//看看我们是否在页面底部，有可能加载更多内容
$（窗口）.on（'scroll'，scrollProducts）；
函数产品（）{
var end=$（“#footer”）.offset（）.top；
var viewEnd=$（窗口）.scrollTop（）+$（窗口）.height（）；
var距离=结束-视图结束；
//当我们接近底部时
如果（距离<300）{
//解绑以防止过度点火
$（窗口）.off（'滚动'，滚动产品）；
log（“我们到了底部”）；
$.ajax({
键入：“GET”，
网址：“foo/bar/2”，
成功：功能（数据）{
console.log（“成功！”）；
$（“#容器”）.append（data.fadeIn（）；
//更新成功后重新绑定
$（窗口）.on（'scroll'，scrollProducts）；
}
});
}
}
});

我想了解更新url中页码的正确方法：

foo/bar/2

我已经读到，由于同步调用和异步调用之间的差异，您不能使用全局变量，而是需要回调（尽管我无法理解它）。我还看到了一个解决方案，其中有人更新了隐藏字段的值，然后引用了这些值，尽管这似乎是一个丑陋的解决方法

---

在这种情况下，正确或推荐的处理页码的方法是什么，以便每次请求时页码都会增加，直到没有更多的页面为止？

保留一个计数器，并在请求中使用它

var page = 1;

$(document).ready(function() {
// see if we're at the bottom of the page to potentially load more content
$(window).on('scroll', scrollProducts);

function scrollProducts() {
    var end = $("#footer").offset().top;
    var viewEnd = $(window).scrollTop() + $(window).height();
    var distance = end - viewEnd;

    // when we're almost at the bottom
    if (distance < 300)  {
        // unbind to prevent excessive firing
        $(window).off('scroll', scrollProducts);
        console.log('we reached the bottom');

        $.ajax({
            type: 'GET',
            url: "foo/bar/" + page,
            success: function(data) {
                console.log("success!");
                $('#container').append(data).fadeIn();
                // rebind after successful update
                $(window).on('scroll', scrollProducts);
                page++;
            }
        });
    }
}
});

var-page=1；
$（文档）.ready（函数（）{
//看看我们是否在页面底部，有可能加载更多内容
$（窗口）.on（'scroll'，scrollProducts）；
函数产品（）{
var end=$（“#footer”）.offset（）.top；
var viewEnd=$（窗口）.scrollTop（）+$（窗口）.height（）；
var距离=结束-视图结束；
//当我们接近底部时
如果（距离<300）{
//解绑以防止过度点火
$（窗口）.off（'滚动'，滚动产品）；
log（“我们到了底部”）；
$.ajax({
键入：“GET”，
url:“foo/bar/”+页面，
成功：功能（数据）{
console.log（“成功！”）；
$（“#容器”）.append（data.fadeIn（）；
//更新成功后重新绑定
$（窗口）.on（'scroll'，scrollProducts）；
page++；
}
});
}
}
});

保留一个计数器，并在您的请求中使用它

var page = 1;

$(document).ready(function() {
// see if we're at the bottom of the page to potentially load more content
$(window).on('scroll', scrollProducts);

function scrollProducts() {
    var end = $("#footer").offset().top;
    var viewEnd = $(window).scrollTop() + $(window).height();
    var distance = end - viewEnd;

    // when we're almost at the bottom
    if (distance < 300)  {
        // unbind to prevent excessive firing
        $(window).off('scroll', scrollProducts);
        console.log('we reached the bottom');

        $.ajax({
            type: 'GET',
            url: "foo/bar/" + page,
            success: function(data) {
                console.log("success!");
                $('#container').append(data).fadeIn();
                // rebind after successful update
                $(window).on('scroll', scrollProducts);
                page++;
            }
        });
    }
}
});

var-page=1；
$（文档）.ready（函数（）{
//看看我们是否在页面底部，有可能加载更多内容
$（窗口）.on（'scroll'，scrollProducts）；
函数产品（）{
var end=$（“#footer”）.offset（）.top；
var viewEnd=$（窗口）.scrollTop（）+$（窗口）.height（）；
var距离=结束-视图结束；
//当我们接近底部时
如果（距离<300）{
//解绑以防止过度点火
$（窗口）.off（'滚动'，滚动产品）；
log（“我们到了底部”）；
$.ajax({
键入：“GET”，
url:“foo/bar/”+页面，
成功：功能（数据）{
console.log（“成功！”）；
$（“#容器”）.append（data.fadeIn（）；
//更新成功后重新绑定
$（窗口）.on（'scroll'，scrollProducts）；
page++；
}
});
}
}
});

嗯。。。现在我觉得自己很傻。我显然没有正确阅读。公平地说，我还发现你链接的帖子中的问题和答案有点复杂。嗯。。。现在我觉得自己很傻。我显然没有正确阅读。公平地说，我还发现你链接的帖子中的问题和答案有点复杂。