Javascript 在for循环完成执行之前的HTML呈现，只显示for循环中的第一项

我试图呈现一个html页面，其中包含用户收到的所有帖子。现在我遇到的问题（如方式1所示）是，当我在收到web套接字后调用函数renderPosts时，只呈现数组中的第一篇文章（数组中有多篇文章）

另一方面，我没有for循环，而是手动渲染每一篇文章的方式2的工作原理是所有四篇文章都被渲染。但是我需要能够处理任意数量的帖子，这就是为什么我需要使用for循环

我正在使用socket.io和javascript

方式1:

socket.on('postsToRender', function(arrayOfPostsToRender) {
   renderPosts(arrayOfPostsToRender);
});

function renderPosts(arrayOfPostsToRender) {
   for (var index = 0; index < arrayOfPostsToRender.length; index++) {
      renderPost(arrayOfPostsToRender[index]);
   }
}

function renderPost(postToRender) {
   var feed = document.getElementById("feed");
   var postContent = document.createTextNode(postToRender.content);
   var post = document.createElement("div");
   post.appendChild(postContent);
   feed.appendChild(post);
}

socket.on('postsToRender', function(arrayOfPostsToRender) {
   renderPost(arrayOfPostsToRender[0]);
   renderPost(arrayOfPostsToRender[1]);
   renderPost(arrayOfPostsToRender[2]);
   renderPost(arrayOfPostsToRender[3]);
});

function renderPost(postToRender) {
   var feed = document.getElementById("feed");
   var postContent = document.createTextNode(postToRender.content);
   var post = document.createElement("div");
   post.appendChild(postContent);
   feed.appendChild(post);
}

试试这个：

function renderPosts(arrayOfPostsToRender) {
   for (var index = 0; index < arrayOfPostsToRender.length; index++) {
      (function(i){
         renderPost(arrayOfPostsToRender[i]);
      })(index);
   }
}

函数renderPosts（arrayOfPostsToRender）{
对于（变量索引=0；索引

循环变量“index”没有用

var

声明这一事实让我很难过。我改变了它。不知道你是不是在讽刺。不，我不是在讽刺。因为您缺少

var

声明，所以该变量是全局变量，因此如果从

for

循环内部调用的任何函数也使用全局

索引

，则会使循环出错。哦，好的，谢谢，我很感激！你能做一个

console.log（arrayOfPostsToRender）吗

并让我们知道控制台上显示了什么？函数

renderPost（arrayOfPostsToRender）{