Question

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

另一方面，我没有循环而是手动渲染每个帖子的方式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);
}

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

Answer 1

试试这个：

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

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

1 个答案: