防止重复无限滚动ajax加载器答案

【问题标题】：preventing duplicates infinite scrolling ajax loader防止重复无限滚动ajax加载器
【发布时间】：2012-02-03 02:23:22
【问题描述】：

对于我来说在这里看到一个明确的解决方案可能为时已晚，但我想我会从任何有意见的人那里得到一些想法......

我正在处理的网站有很长的用户帖子列表。当你到达或接近底部时，我已经让所有滚动事件处理程序在下一批 100 个帖子中工作以进行 ajax。

我的问题是...如何防止出现以下情况？

UserX 访问该站点并加载帖子 1-100
又有 10 位用户访问了该网站并添加了 10 个帖子
UserX 滚动到底部并加载帖子 101-200，以前是帖子 91-190
UserX 最终在页面上出现重复的帖子 91-100

我将在下面包含我的代码的精简版本，以防它帮助其他人

$.ajax({
    type:'POST',
    url:"/userposts.php",
    data:{ limit: postCount },
    success:function(data) {
        $("postsContainer").append(data);
        if ( $("postsContainer").find("div[id='lastPostReached']") ) {
            // unbind infinite scrolling event handlers
        }
    },
    dataType:'html'
});

在我的 PHP 脚本中，我基本上有以下内容：

if ( ! isset($_POST["limit"]) ) {
    $sql .= " LIMIT 101"; // initial request
} else {
    $sql .= " LIMIT {$_POST["limit"]},101
}

$posts = mysql_query($sql);
while( $post = mysql_fetch_assoc($posts) ) {
    /* output formatted posts */
}

// inform callback handler to disable infinite scrolling
if ( mysql_num_rows($posts) < 101 ) {
    echo '<div id="lastPostReached"></div>';
}

这让我可以轻松地无限滚动，但是如何防止在 ajax 请求之间将新记录添加到表中时出现假设的重复？

【问题讨论】：

标签： php jquery mysql ajax infinite-scroll

【解决方案1】：

您从 php 定义一个时间戳，指示页面加载时的服务器时间（例如var _loadTime = <?php echo time(); ?>），然后将此值作为 Ajax 数据配置对象的一部分与限制一起传递。

然后在服务器端，您可以排除在此时间之后创建的任何帖子，然后保留您的列表。

您还可以更进一步，将这段时间与基本的 ajax 长轮询技术一起使用，以通知用户自页面加载/上次加载新帖子以来的新帖子 - 类似于 Facebook 和 Twitters 提要。

【讨论】：

如果有人删除了一些内容怎么办？

【解决方案2】：

更新您的 ajax 请求，以便除了 limit 参数之外，您还可以通过当前的帖子 ID 范围（我假设帖子具有某种唯一 ID）。更新您的 php 以在检索下一组帖子时考虑这些参数。

也就是说，请求不是说“再给我 100”，而是“从 id x 开始给我 100”。

（抱歉，我现在没有时间为此编写示例代码。）

【讨论】：

在我看来，这似乎是更健壮的方法（耐添加和删除）。我想知道查询的一些实现。 @nnnnnn 你能举个例子吗？

【解决方案3】：

只需为帖子使用唯一标识符 ID 并倒数。

首次访问用户请求帖子 603-503

10 个用户进入页面并添加 cmets，因此最高评论现在是 613

用户向下滑动并请求 503-403

问题解决了吗？ :)

【讨论】：

如果我总是按时间倒序排序那很好，但我使用多个过滤器对帖子列表进行排序，因此帖子的主键将按随机顺序排列......我考虑在我的帖子数据中包含所有当前列出的帖子的数组，以从未来的 SQL 查询中排除（即：'NOT IN (a,b,....,z)'），但这个数组最终可能有 100 个 ID在里面，这似乎并不实用
从原始过滤器（ASC = DESC，DESC = ASC）向后排序，然后将数据集末尾的块切到前面。例如您的第一个 post-chunk 限制是（postnumbers-100 到 postnumbers），之后它始终是您上次交付的索引 - 100 到最后一个索引。这样从逻辑上讲，所有新数据都会附加到数据集的末尾。