基于 AJAX 的无限滚动器，带有 jQ​​uery、PHP 和 mySQL

Question

我正在尝试使用 jQuery、PHP 和 mySQL 构建一个基于 AJAX 的无限滚动器。

非常简单，主页面中有一个 div，其中包含常规内容 (#theContent)。当窗口滚动到底部时，会自动调用外部 PHP 页面 (articles.php) 来查询 mySQL 数据库，然后将新的 PHP 内容附加到主页面中 div#theContent 的末尾。只要记录集中有新内容，这将持续，使用从主页面传递到外部页面的偏移量变量。

我有部分工作，但可以使用一些关于偏移量的建议。在下面的代码 sn-p（来自主页）中，您将看到“articles.php?offset=10” - 我想在每次附加页面时增加“偏移”值（当它滚动到底部时） ，因此每次调用 .append(data) 时都会更新偏移值。这就是我卡住的地方。

在主页面的头部（此滚动有效，并执行对数据库的初始调用）：

<script>
$(window).scroll(function () {
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {

    $.get('articles.php?offset=10', function(data) {
        $('#theContent').append(data);
    });


       }
});
</script>

在articles.php 中（单独工作）

$offset = $_GET["offset"]; // gets from primary page  

the SQL call:
    "Select blah from blah order by blah limit 50,$offset";

所以总结一下：每次调用 .append 时，如何在主页中增加偏移量变量？

感谢阅读。

---

编辑：我编辑了 sn-p fr Ohgodwhy，将偏移量增量器移到 $.get 之外。太好了 - 现在循环相同的记录问题已经消失了。编辑：

 var offset = 10;
$(window).scroll(function () {

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

        $.get('articles.php?offset='+offset, function(data) {
            $('#theContent').append(data);

        });

  offset += 10;
        }
});

Answer 1

var offset = 10;
$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {

        $.get('articles.php?offset='+offset, function(data) {
            $('#theContent').append(data);
            offset += 10;
        });


        }
});