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