我正在使用此方法来检测两个div列的结尾并加载新帖子。这是工作。但问题是,首先它默认加载五个帖子功能,然后当用户向下滚动时,它会加载接下来的五个帖子(第二阶段)至少10次。比向下滚动更多时,它会再次加载5个帖子(第3阶段)至少10次。否则功能很好。
<script>
$(window).scroll(function() {
if($(window).scrollTop() >= $('.div1').height() - $(window).height()) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$('#loadmoreinstagram').remove();
document.getElementById("instagramresponse").innerHTML = document.getElementById("instagramresponse").innerHTML+this.responseText;
}
};
xmlhttp.open("GET", "<?php echo $settings['URL']; ?>getdata.php?type=" + $('#type').last().val() + "&page=" + $('#page').last().val() + "&lasttime=" + $('#lasttime').last().val(), true);
xmlhttp.send();
}
if($(window).scrollTop() >= $('.div2').height() - $(window).height()) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$('#loadmoretwitter').remove();
document.getElementById("twitterresponse").innerHTML = document.getElementById("twitterresponse").innerHTML+this.responseText;
}
};
xmlhttp.open("GET", "<?php echo $settings['URL']; ?>getdata.php?type=" + $('#typetwitter').last().val() + "&page=" + $('#pagetwitter').last().val() + "&lasttime=" + $('#lasttimetwitter').last().val(), true);
xmlhttp.send();
}
});
</script>
你的问题是window.scroll
事件多次触发一次“滚动”。您只需通过将以下内容粘贴到控制台中来记录事件即可看到此信息。
$(window).scroll(function() {console.log('scroll')})
要解决此问题,您需要在短时间内连续多次阻止您的请求。这称为去抖动。 Underscorejs有一个很好的内置功能,但快速谷歌将产生大量的资源来编写自己的。下面的代码使用underscorejs函数解决了您的问题。
var debouncedFn = _.debounce(function() { console.log('scroll')}, 100)
$(window).scroll(debouncedFn)
了解debounce https://davidwalsh.name/javascript-debounce-function
适合您的应用:
</script>
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
function handleScroll() {
if($(window).scrollTop() >= $('.div1').height() - $(window).height()) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$('#loadmoreinstagram').remove();
document.getElementById("instagramresponse").innerHTML = document.getElementById("instagramresponse").innerHTML+this.responseText;
}
};
xmlhttp.open("GET", "<?php echo $settings['URL']; ?>getdata.php?type=" + $('#type').last().val() + "&page=" + $('#page').last().val() + "&lasttime=" + $('#lasttime').last().val(), true);
xmlhttp.send();
}
if($(window).scrollTop() >= $('.div2').height() - $(window).height()) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$('#loadmoretwitter').remove();
document.getElementById("twitterresponse").innerHTML = document.getElementById("twitterresponse").innerHTML+this.responseText;
}
};
xmlhttp.open("GET", "<?php echo $settings['URL']; ?>getdata.php?type=" + $('#typetwitter').last().val() + "&page=" + $('#pagetwitter').last().val() + "&lasttime=" + $('#lasttimetwitter').last().val(), true);
xmlhttp.send();
}
}
var debouncedScroll = debounce(handleScroll, 100)
$(window).scroll(debouncedScroll);
</script>
通常,如果您使用的是jquery,则执行以下操作:
$.get(url).done( result => {
// do stuff when ajax is done
})
但是你在这里的设置似乎完全依赖于用户的滚动操作来激活done
中要做的事情。所以我不知道该告诉你什么,而不是把它发回给开发者(根据你在别处做的评论)。
jquery的常规实现类似于:
<script>
var working = false;
$(window).scroll(function() {
if($(window).scrollTop() >= $('.div1').height() - $(window).height() && !working) {
working = true;
$.get( url ).done( result => {
$('#loadmoreinstagram').remove();
$("#loadmoreinstagram").html = $("#loadmoreinstagram").html + result.responseText;
working = false;
} )
}
if($(window).scrollTop() >= $('.div2').height() - $(window).height() && !working) {
working = true;
$.get( url ).done( result => {
$('#loadmoretwitter').remove();
$("#loadmoretwitter").html = $("#loadmoretwitter").html + result.responseText;
working = false;
} )
}
});
</script>
你可以看到差异,你的开发人员没有使用jquery来使硬件容易。