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

Question

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

我正在处理的网站有很多用户帖子.当你到达或接近底部时,我已经让所有滚动事件处理程序在下一批100个帖子中工作到ajax.

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

1. UserX访问该网站并加载帖子1-100
2. 另有10位用户访问该网站并添加10个帖子
3. UserX滚动到底部并加载帖子101-200,以前是帖子91-190
4. 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请求之间将新记录添加到表中时出现的假设重复？

Answer 1

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

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

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