[英]Incorrect AJAX data loading with “infinite” scrolling
我目前正在处理一个脚本,当您触发内容(通过单击链接)或滚动到页面底部时,该脚本将加载内容。 我这样做很有趣,但是它慢慢变成了一场噩梦...触发的部分正常工作,而“滚动到底部”部分有时有效,有时却没有。 它有时会加载两次帖子,有时会重复发布帖子集(我一次加载5个帖子),而不显示下一组帖子,我猜是因为它是如此快速地加载内容,所以:
当您向下滚动滚动条时会出现问题,因此它会非常快速地加载内容,对于Firefox来说尤其如此,因为如果您已经在页面底部并刷新页面,它将无限期加载,直到没有更多内容为止帖子,再一次,它确实非常快。
我整天都尝试了不同的方法……但找不到解决方案。 首先,我尝试设置一个标志,以便在每个AJAX调用完成时,它会按加载的帖子数增加某个变量,并且仅在数量增加后才会再次执行该调用,并且必须按顺序执行(在我的脑海中表示AJAX调用成功)。 这没用。
然后,我尝试为AJAX调用设置超时,然后为包含该调用的函数设置超时,然后为首先执行该函数的功能(滚动到底部)设置这种超时,但是在缺点是在该超时时间内不执行任何操作(因此,甚至不显示“正在加载” html),并且情况发生的次数更少,但仍然发生。 我还尝试在$ .ajax()函数中设置超时,我认为这是另一种超时,因为它没有达到我想要的效果...
最后,我尝试将async设置为false,这是一件坏事,因为它会挂起页面直到完成,并且也已弃用; 不用说,它也不起作用(我没有注意到任何明显的行为变化)。
我真的在这里迷路了; 我什至不知道为什么会发生这种“小故障” ...
这是我的代码...
$.ajax({ //Removed some code in order to make it brief
url: 'load.php',
type: 'post',
dataType: 'json',
data: {offset: countContent, limit: displayNumber},
success: function(data)
{
if(data)
{
for(var i=0;i<display_n;i++)
{
var title = data[i][1];
var author = data[i][2];
var img = data[i][3];
var date = data[i][4];
var htmlStr =
'<div class="post" id="'+i+'"></div>';
$(element).append(htmlStr);
$(element).children('#'+i+':last').hide().fadeIn(200+(i*250));
}
}
else if(data == null){
//Do something when there are no more posts
}
},
error: function() {
// Error
}
});
和处理ajax调用的php
<?php
$offset = (int) $_POST['offset'];
$limit = (int) $_POST['limit'];
$db = 'mysql:host=localhost;dbname=posts;charset=utf8';
$u = 'username';
$p = 'password';
$con = new PDO($db,$u,$p);
$q = $con->prepare("SELECT id, title, author, img, date FROM articles
ORDER BY id DESC LIMIT :limit OFFSET :offset");
$q->bindParam(':offset',$offset,PDO::PARAM_INT);
$q->bindParam(':limit',$limit,PDO::PARAM_INT);
$q->execute();
$articles = $q->fetchAll(PDO::FETCH_NUM);
$con = null;
$array_count = count($articles);
if ($articles){
for ($i=0;$i<$array_count;$i++)
{
$articles[$i][4] = date("d F Y",strtotime($articles[$i]['4']));
}
echo json_encode($articles);
}
else
{
$articles = null; //sends null if the data is empty
echo json_encode($articles);
}
?>
有没有办法在另一个执行之前“延迟” ajax调用,以使项目正确加载? 还是等到按计划加载了ajax中的所有内容,然后再转到下一个? 在这种情况下我该怎么办?
抱歉,如果这篇文章很大,我想指出一点,哈。 非常感谢您的帮助,谢谢。
编辑:这是我在下面发布的解决方案:
我将全局变量运行设置为false,并将整个AJAX调用包装在if !running条件下 ,进入循环后立即使该变量为true,然后在$ .ajax的“ complete: ”参数上再次使其为false函数或通过$ .ajaxComplete() 。 我猜一个人也可以使用.on()和.off()语句来绑定和取消绑定事件触发器,但是我发现前一种方法非常简单。
这样,AJAX调用就可以在另一个启动之前完成,并且内容可以正确显示。
我建议您在触发事件触发器后立即将其关闭,并在填充DOM之后将其重新打开。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.