在 for 循环完成执行之前的 HTML 渲染，只显示 for 循环中的第一项答案

【问题标题】：HTML rendering before for-loop finishes executing, only first item in for-loop showing在 for 循环完成执行之前的 HTML 渲染，只显示 for 循环中的第一项
【发布时间】：2015-01-21 15:17:37
【问题描述】：

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

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

我正在使用 socket.io 和 javascript。

方式一：

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);
}

方式 2：

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);
}

【问题讨论】：

你的循环变量“index”没有用var声明这个事实让我很难过。
我改了。不知道你是不是在讽刺。
不，我不是在讽刺。因为您缺少var 声明，所以该变量是一个全局变量，因此如果从for 循环内部调用的任何函数也使用了全局index，它会搞砸循环.
哦，好的，谢谢，我很感激！
您能否发送console.log(arrayOfPostsToRender); 并告诉我们控制台上显示的内容？紧随功能renderPosts(arrayOfPostsToRender) {

标签： javascript for-loop socket.io rendering

【解决方案1】：

试试这个：

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

【讨论】：