I'm praticing the infinity sroll follow the source https://cs50.harvard.edu/web/2020/notes/6/ , but instead of calling to sever side, i just append elements form start to end index of datas array and the result as not as my expectation.I think that something related about Javascript's asynchronous feature. Is that true? How can I fix this problem?
<!DOCTYPE html>
<html>
<head>
<title>Infiniti Scroll</title>
</head>
<body>
<div id="data"></div>
<script>
let start = 0
let end = 100
const datas = []
for (let index = 0; index < 1000; index++) {
datas.push(`<p>${index}</p>`);
}
document.addEventListener("DOMContentLoaded",function(){
load();
window.onscroll = ()=>
{
if (window.innerHeight + window.scrollY >= document.body.offsetHeight)
{
setTimeout(load,1000);
}
}
});
function load(){
for (let index = start; index <= end; index++) {
document.querySelector("#data").innerHTML+=datas[index];
}
start =end;end+=100;
}
</script>
</body>
</html>