当窗口滚动事件的值为true时,我将获取一些Ajax。在网络选项卡中,我注意到GET请求在每个事件中连续触发两次,尽管我设置了一个超时标志来禁用运行多次(当前为3秒)的Ajax函数。
为什么会这样?
谢谢。
编辑:
我刚刚注意到的一件事是,在文档就绪时,它会触发两次,因此它甚至可能与滚动无关。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Infinite Scroll</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var offset = 0;
var limit = 10;
// jsonplaceholder is an working example endpoint.
var apiEndpoint = "https://jsonplaceholder.typicode.com/posts?_offset=";
var working = false;
$(document).ready(function() {
getContent();
});
$(window).scroll(function() {
console.log("Fired if ==", $(window).scrollTop() + $(window).height(), getDocHeight());
if ($(window).scrollTop() + $(window).height() == getDocHeight()) {
if (working == false) {
working = true;
getContent();
//console.log("Fired! Offest = ", offset);
}
}
});
function getContent() {
$.ajax({
type: "GET",
url: apiEndpoint+offset+"&_limit="+limit,
processData: false,
contentType: "application/json",
data: '',
success: function(res) {
//console.log(res);
for (var i = 0; i < res.length; i++) {
// replace title and body with properties you need to extract from res
$('body').append("<div><h1>"+res[i].title+"</h1><p>Content: "+res[i].body+"</p></div>");
}
// no need to run timeout on first use (page load)
if(offset !== 0){
// stop ajax call firing too rapidly
setTimeout(function() {
working = false;
}, 3000)
}
offset += 5;
},
error: function(res) {
console.log("Something went wrong! - ", res);
}
});
}
// Get document height (cross-browser compatibility)
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
</script>
</body>
</html>
