防止重复无限滚动ajax加载器
对于我来说，在这里看到一个明确的解决方案可能已经太晚了，但我想我会从任何有意见的人那里得到一些想法......
我正在工作的网站有一个很长的用户帖子列表。当您到达或接近底部时，我已经让所有滚动事件处理程序在下一批 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 请求之间将新记录添加到表中时出现的假设重复项？
it might just be too late at night for me to see a clear solution here, but I figured I'd get some thoughts from anybody with an opinion...
the site i'm working on has a long list of user posts. i've got all the scroll event handlers working to ajax in the next batch of 100 posts when you reach or approach the bottom.
my question is... How do i prevent the following scenario?
- UserX visits the site and loads posts 1-100
- 10 more users visit the site and add 10 more posts
- UserX scrolls to bottom and loads posts 101-200, which used to to be posts 91-190
- UserX ends up with duplicates of posts 91-100 on the page
i'll include a stripped down version of my code below in case it helps anybody else along
$.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'
});
in my PHP script I have essentially the following:
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>';
}
This gives me infinite scrolling nice and easy, but how can I prevent the hypothetical duplicates that would show up when new records have been added to the table between ajax requests?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以从 php 定义一个时间戳，指示页面加载时的服务器时间（例如
var _loadTime =），然后将此值作为Ajax 数据配置对象以及限制。然后在服务器端，您可以排除在此时间之后创建的任何帖子，从而保留您的列表。
您还可以更进一步，使用这段时间以及基本的 ajax 长轮询技术来通知用户自页面加载/上次加载新帖子以来的新帖子 - 类似于 Facebook 和 Twitter 提要。
You define a timestamp from php that indicates the servertime at the time the page loads (eg
var _loadTime = <?php echo time(); ?>) and then pass this value as part of the Ajax data config object along with limit.Then on the server side you can exclude any posts that were created after this time and hense preserve your list.
You can also go a step further and use this time along with a basic ajax long polling technique to notify the user of new posts since the page loaded/last loading of new posts - similar to Facebook and Twitters feeds.
更新您的 ajax 请求，以便除了
limit参数之外，您还可以传递帖子 id 的当前范围（我假设帖子具有某种唯一的 id）。更新您的 php 以在检索下一组帖子时考虑这些参数。也就是说，请求不是“再给我 100 个”，而是“从 id x 开始给我 100 个”。
（抱歉，我现在没有时间为此编写示例代码。）
Update your ajax request, so that in addition to the
limitparameter you pass through the current range of post ids (I'm assuming the posts have some kind of unique id). Update your php to take those parameters into account when retrieving the next set of posts.That is, instead of saying "give me another 100" the request is "give me 100 starting at id x".
(Sorry, I don't have time now to write an example code for this.)
只需为帖子使用唯一的标识符 ID 并倒数即可。
首次访问用户请求帖子 603-503
十个用户进入页面并添加评论，因此最高评论现在为 613
用户向下滚动并请求 503-403
问题解决了吗？ :)
Just use a unique identifier ID for the posts and count backwards.
First visit user requests posts 603-503
Ten users get on the page and add comments so the highest comment is now 613
User scolls down and requests 503-403
Problem solved? :)