在JavaScript For循环期间更新DOM

Question

我遇到了我似乎无法克服的Java障碍。

在API调用循环运行时，是否有任何“更新”视图的方法？

例如：

for (var x =0; x<array.length; x++) {
//do an api call
console.log(“Processing “+x+” of “+array.length+” records.”);
};

上面将每个循环的x值输出到控制台。 但是，这：

for (var x =0; x<array.length; x++) {
var body = document.getElementById(“view_100”);
//do an api call
body.innerHTML = “Processing “+x+” of “+array.length+” records.”;
};

在所有循环完成之后才显示dom，然后仅显示x的最后一个值。

关于如何在长时间的javascript循环中使用户了解最新情况的任何想法？

Answer 1

 var array = [1,2,3,4,5] for (var x = 0; x<array.length; x++) { var body = document.getElementById("view_100"); //do an api call //append the text instead of reassigning body.innerHTML += "Processing "+(x+1)+" of "+array.length+" records."; /* cleaner way var message = document.createElement("p"); message.innerText = "Processing "+(x+1)+" of "+array.length+" records." body.append(message) */ }; 

 <div id="view_100"></div> 

Answer 2

您可以使用append元素

const body = document.getElementById(“view_100”);
for (var x =0; x<array.length; x++) {
    const statusEl = document.createElement('div');
    statusEl.innerHTML = `Processing ${x + 1} of ${array.length} records`
    //do an api call
    body.appendChild(statusEl);
};