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

Posted 2023-02-24

【中文标题】防止重复无限滚动ajax加载器

【英文标题】：preventing duplicates infinite scrolling ajax loader

【发布时间】：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 请求之间将新记录添加到表中时出现假设的重复？

【参考方案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 到最后一个索引。这样从逻辑上讲，所有新数据都会附加到数据集的末尾。