在Javascript中无限滚动，其中包含来自文件的数据

Question

我想用普通的Javascript做无限滚动。我看过几个教程，但所有教程都从一些api中获取一些随机数据。我从教程中理解了代码，但我不知道如何按顺序获取数据，而不是随机的。

我想做类似的事情：https://codepen.io/FlorinPop17/pen/RwwvKYJ 但我想使用本地文件中的数据。让我们假设它是数据.js并且具有类似的代码：

data = [{}, {}]

所以它是对象数组，让我们假设对象的内容是这样的：https://jsonplaceholder.typicode.com/posts/

您将如何更改此代码笔中的代码以按顺序逐个显示帖子？我猜，函数getPost应该有参数“id”，每次调用这个函数时，参数都应该加1？但是怎么做呢？或者，也许我应该迭代数据.js并在每次迭代时检查用户是否滚动到底部？

Answer 1

您只需更改函数即可使用包含所有可用帖子的内联。当前偏移量保存在一个全局变量中，该变量每次调用都会增加，因此订单将保持不变，并且不会多次显示任何帖子。getPost()blog_datapost_offsetgetPost()// all the blog entries that are availableconst blog_data = [{&nbsp; title: "Blog Entry 1",&nbsp; body: "This is the example body text for entry 1."},{&nbsp; title: "This is number two",&nbsp; body: "Also blog entry number 2 has some content."},{&nbsp; title: "Blog entry three",&nbsp; body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."},{&nbsp; title: "Blog entry four",&nbsp; body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."},{&nbsp; title: "Blog entry five",&nbsp; body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."},{&nbsp; title: "Blog entry six",&nbsp; body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."}];const container = document.getElementById('container');const loading = document.querySelector('.loading');let post_offset = 0;getPost();getPost();getPost();window.addEventListener('scroll', () => {&nbsp; const { scrollTop, scrollHeight, clientHeight } = document.documentElement;&nbsp; if(clientHeight + scrollTop >= scrollHeight - 5) {&nbsp; &nbsp; // show the loading animation&nbsp; &nbsp; showLoading();&nbsp; }});function showLoading() {&nbsp; if(post_offset < blog_data.length){&nbsp; &nbsp; loading.classList.add('show');&nbsp; &nbsp; // load more data&nbsp; &nbsp; setTimeout(getPost, 1000)&nbsp; }&nbsp; else{&nbsp; &nbsp; // end has been reached, no more posts available&nbsp; }}async function getPost() {&nbsp; if(post_offset < blog_data.length){&nbsp; &nbsp; addDataToDOM(blog_data[post_offset]);&nbsp; &nbsp; post_offset++;&nbsp; }}function addDataToDOM(data) {&nbsp; const postElement = document.createElement('div');&nbsp; postElement.classList.add('blog-post');&nbsp; postElement.innerHTML = `&nbsp; &nbsp; <h2 class="title">${data.title}</h2>&nbsp; &nbsp; <p class="text">${data.body}</p>&nbsp; `;&nbsp; container.appendChild(postElement);&nbsp; loading.classList.remove('show');}@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap');* {&nbsp; box-sizing: border-box;}body {&nbsp; background-color: #fafafa;&nbsp; font-family: 'Open Sans', sans-serif;&nbsp; padding-bottom: 100px;}.container {&nbsp; margin: 0 auto;&nbsp; max-width: 600px;}.blog-post {&nbsp; background-color: #fff;&nbsp; box-shadow: 0px 1px 2px rgba(50, 50, 50, .1), 0px 2px 4px rgba(60, 60, 60, 0.1);&nbsp; border-radius: 4px;&nbsp; padding: 40px;&nbsp; margin: 20px 0;}.title {&nbsp;&nbsp;&nbsp; margin: 0;&nbsp;&nbsp;}.text {&nbsp; color: #555;&nbsp; margin: 20px 0;}.loading {&nbsp; opacity: 0;&nbsp; display: flex;&nbsp; position: fixed;&nbsp; bottom: 50px;&nbsp; left: 50%;&nbsp; transform: translateX(-50%);&nbsp; transition: opacity .3s ease-in;}.loading.show {&nbsp; opacity: 1;}.ball {&nbsp; background-color: #777;&nbsp; border-radius: 50%;&nbsp; margin: 5px;&nbsp; height: 10px;&nbsp; width: 10px;&nbsp; animation: jump .5s ease-in infinite;}.ball:nth-of-type(2) {&nbsp; animation-delay: 0.1s;}.ball:nth-of-type(3) {&nbsp; animation-delay: 0.2s;}@keyframes jump {&nbsp; 0%, 100% {&nbsp; &nbsp; transform: translateY(0);&nbsp; }&nbsp; 50% {&nbsp; &nbsp; transform: translateY(-10px);&nbsp; }}<div class="container" id="container">&nbsp; <h1>Blog Posts</h1></div><div class="loading">&nbsp; <div class="ball"></div>&nbsp; <div class="ball"></div>&nbsp; <div class="ball"></div></div>