Javascript 为什么当我将第三个帖子放入数组时，这个代码段只显示了两个帖子？

我有两个功能。 第一个是getPosts，访问一个名为posts的对象数组，并使用setTimeout在延迟一段时间后在网页上显示它们。 第二个是createPost，将一个对象作为参数作为post，并将其推送到posts数组的末尾。 代码如下：

常数员额=[ {标题：1，正文：这是第一篇文章}， {标题：2，正文：这是另一篇博文2} ] 函数getPosts{ posts.forEachpost，索引，arr=>{ 设置超时=>{ document.body.innerHTML+=post.body+； },3000; } } 函数createPostpost{ posts.pushpost； } getPosts； //这里添加了第三个帖子，但没有显示？ createPost{title:'henlo'，body:'troll message'} 当只有2个条目时，posts.forEach在计时器之前执行

const posts = [
    {title: "#1", body: "This is post number one"},
    {title: "#2", body: "This is another post (#2)"}
];

function getPosts(){
    setTimeout(() => {
        posts.forEach((post, index, arr) => {
            console.log(post.body + '<br>');
        }, 3000);
    })

    // posts.forEach((post,index,arr)=>{
    //     setTimeout(()=>{
    //         console.log(post.body+'<br>');
    //     },3000);
    // })
}

function createPost(post){
    posts.push(post);
}

getPosts();
createPost({title:'henlo',body:'troll message'});

当只有2个条目时，posts.forEach在计时器之前执行

const posts = [
    {title: "#1", body: "This is post number one"},
    {title: "#2", body: "This is another post (#2)"}
];

function getPosts(){
    setTimeout(() => {
        posts.forEach((post, index, arr) => {
            console.log(post.body + '<br>');
        }, 3000);
    })

    // posts.forEach((post,index,arr)=>{
    //     setTimeout(()=>{
    //         console.log(post.body+'<br>');
    //     },3000);
    // })
}

function createPost(post){
    posts.push(post);
}

getPosts();
createPost({title:'henlo',body:'troll message'});

---

展示它的最简单方法是通过一个小的console.log显示getPosts的实际功能：

常数员额=[ {标题：1，正文：这是第一篇文章}， {标题：2，正文：这是另一篇博文2} ] 函数getPosts{ posts.forEachpost，索引，arr=>{ console.log`item${index}，内容为${post.body}。显示延迟以备以后使用` 设置超时=>{ document.body.innerHTML+=post.body+； },3000; } } 函数createPostpost{ posts.pushpost； } getPosts； //这里添加了第三个帖子，但没有显示？

---

createPost{title:'henlo'，body:'troll message'} 展示它的最简单方法是通过一个小的console.log显示getPosts的实际功能：

常数员额=[ {标题：1，正文：这是第一篇文章}， {标题：2，正文：这是另一篇博文2} ] 函数getPosts{ posts.forEachpost，索引，arr=>{ console.log`item${index}，内容为${post.body}。显示延迟以备以后使用` 设置超时=>{ document.body.innerHTML+=post.body+； },3000; } } 函数createPostpost{ posts.pushpost； } getPosts； //这里添加了第三个帖子，但没有显示？

---

createPost{title:'henlo'，body:'troll message'} 相反，将超时放在循环内，如果将循环放在超时内，则您将得到预期的结果：

常数员额=[ {标题：1，正文：这是第一篇文章}， {标题：2，正文：这是另一篇博文2} ]; 函数getPosts{ 设置超时=>{ posts.forEachpost，索引，arr=>{ console.logpost.body+； }; }, 3000; } 函数createPostpost{ posts.pushpost； } getPosts；

---

createPost{title:'henlo'，body:'troll message'} 相反，将超时放在循环内，如果将循环放在超时内，则您将得到预期的结果：

常数员额=[ {标题：1，正文：这是第一篇文章}， {标题：2，正文：这是另一篇博文2} ]; 函数getPosts{ 设置超时=>{ posts.forEachpost，索引，arr=>{ console.logpost.body+； }; }, 3000; } 函数createPostpost{ posts.pushpost； } getPosts； createPost{title:'henlo'，body:'troll message'}； 我的问题是为什么getPosts不会在网页上显示第三篇文章，尽管它是在3秒钟后执行的

getPosts不会在3秒后执行，只有这两个项目以3秒的延迟显示，相反，您可以延迟getPosts的执行，您将得到预期的结果：

常数员额=[ {标题：1，正文：这是第一篇文章}， {标题：2，正文：这是另一篇博文2} ] 函数getPosts{ posts.forEachpost，索引，arr=>{ document.body.innerHTML+=post.body+； } } 函数createPostpost{ posts.pushpost； } setTimeoutgetPosts，3000； createPost{title:'henlo'，body:'troll message'}； 我的问题是为什么getPosts不会在网页上显示第三篇文章，尽管它是在3秒钟后执行的

getPosts不会在3秒后执行，只有这两个项目以3秒的延迟显示，相反，您可以延迟getPosts的执行，您将得到预期的结果：

常数员额=[ {标题：1，正文：这是第一篇文章}， {标题：2，正文：这是另一篇博文2} ] 函数getPosts{ posts.forEachpost，索引，arr=>{ document.body.innerHTML+=post.body+； } } 函数createPostpost{ posts.pushpost； } setTimeoutgetPosts，3000；

---

createPost{title:'henlo'，body:'troll message'}；当您调用getPosts时，数组只有两个项，因此它会延迟将显示一个post的两个函数。您可以立即执行此操作，并在post中直接迭代每个post。三秒钟的延迟是在机构中增加新职位。但是，当执行此代码时，只有2个posts您将获得其中的前两个posts，然后在事件循环中添加超时，以在3秒后更新元素的innerHTML，同时使用

---

第三个职位。3秒钟后，将显示包含2个元素的列表，发布后没有其他调用来获取更新的列表。您需要执行createPost，然后再次获取帖子。当您调用getPosts时，数组只有两个项，因此它会延迟将显示帖子的两个函数。请查看getPosts中的代码。您可以立即执行此操作，并在post中直接迭代每个post。三秒钟的延迟是在机构中增加新职位。但是，当执行此代码时，只有两个post您正在获取帖子前两个post，之后您在事件循环中添加超时，以在3秒后更新元素的innerHTML，同时使用第三个post更新posts列表。3秒钟后，将显示包含2个元素的列表，发布后没有其他调用来获取更新的列表。你需要做createPost，然后再发一次帖子。谢谢你抽出时间。你的回答真的很有帮助。最后让我困惑的是，foreach方法中的第一个参数。再次感谢。非常感谢。谢谢你抽出时间来。你的回答真的很有帮助。最后让我困惑的是，foreach方法中的第一个参数。再次感谢。非常感谢。