我正在尝试在用户到达页面底部并添加新内容时更新Feed。它出于某种原因根本没有返回内容。 这是我的jquery / javascript
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $(document).height() - 650){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("thumbs").innerHTML = xmlhttp.responseText;
}
else {
document.getElementById("thumbs").innerHTML = "Error Occurred.";
}
}
xmlhttp.open("GET", "include/update-gamer-feed-curl.php", true);
xmlhttp.send();
}
});
php文件已经有效,因为它已经获得了前十项,我只是再次调用它来将数据重新加载到屏幕中,这样我就可以准备在获得更多元素后附加所需内容。
它告诉我xmlhttp已折旧。我也尝试过使用
$.ajax({url: "include/update-gamer-feed-curl.php", success: function(result)
{
$("#thumbs").append(result);
}
但这也不起作用。我知道这是因为如果我把字符串测试放在append元素中,结果是它附加测试字符串。
答案 0 :(得分:1)
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 650){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/echo/json/", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4){
if (xmlhttp.status == 200) {
document.getElementById("thumbs").innerHTML = xmlhttp.responseText;
}
else{
console.log("Error: rState=" + xmlhttp.readyState + ", status=" + xmlhttp.status);
}
}
}
}
}, 250));
似乎请求重复得太多了。 250ms的计时器帮助了一些,但仍然,innerHTML被覆盖得太快了。所以我也改变了,如果成功,则写入innerHTML,但是控制台会收到错误。在滚动时,readyState 1,2,3重复多次,并导致许多错误。首先检查readtState == 4。
以下是readystates的描述
updated fiddle with no errors,首先确保readyState == 4,然后检查状态。通过在onreadystatechange上移动open并发送,可以避免使用状态错误0和1。