无限卷轴练习答案

【问题标题】：Infinite Scroll pratice无限卷轴练习
【发布时间】：2022-06-10 21:21:00
【问题描述】：

我正在练习 infinity sroll 跟随源 https://cs50.harvard.edu/web/2020/notes/6/ ，但我没有调用服务器端，而是将元素从 start 附加到 end datas 数组的 索引和结果与我的预期不同。我认为这与 Javascript 的异步功能有关。真的吗？我该如何解决这个问题？

<!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>

【问题讨论】：

你能更清楚你想要达到什么目的吗？
你将end 和start 设置为相同。
@gre_gor 。哦，我还没有仔细意识到。感谢您的评论。

标签： javascript asynchronous