如何在 for 循环运行前后更新内部 HTML

Question

我建立了一个页面，在提交表单后，会显示一个图表，显示提交的数据。

该图表最多可以显示 10 个模拟 x 10000 人口规模 x 1000 代，因此单击表格后数据可能需要一些时间才能显示。

我希望能够用 id 消息更新 div，内部文本为 'Loading...'，而执行计算的 for 循环是运行ning，然后去掉里面有运行.

的文字

如果我在for循环之前console.log("Before")，在for循环之后console.log("After")，则循环前后打印出的消息有运行.

但是，如果我在循环之前放置 message.innerText = "Loading..."，在循环之后放置 message.innerText = ""，则“正在加载...”消息永远不会出现在 HTML.

这是我一直在努力实现的（非常）高度简化的版本

我怀疑解决方案可能正在使用 Promises，但我看不到将它们应用到我的代码中的方法。有什么建议吗？

const form = document.querySelector("#form")
const message = document.querySelector("#message")

form.addEventListener("submit", e => {
  e.preventDefault()

  console.log("before") // this prints BEFORE for loop ends
  message.innerText = "Loading..." // This is never displayed in html
  for (let i = 0; i < 10000; i++) {
    console.log(i)
  }
  message.innerText = "Loaded" // This is displayed in html
  console.log("after") // this prints AFTER for loop ends
})

<form id="form">
  <button>Submit</button>
</form>

<div id="message"></div>

Answer 1

尝试给界面一个机会

const form = document.querySelector("#form")
const message = document.querySelector("#message")

form.addEventListener("submit", e => {
  e.preventDefault()

  console.log("before") // this prints BEFORE for loop ends
  message.innerText = "Loading..."
  setTimeout(() => {
    for (let i = 0; i < 1000; i++) console.log(i);
    message.innerText = "Loaded" // This is displayed in html
    console.log("after") // this prints AFTER for loop ends    
  }, 10)

  
})

<form id="form">
  <button>Submit</button>
</form>

<div id="message"></div>

如何在 for 循环运行前后更新内部 HTML

How to update inner HTML before and after a for loop runs

javascript

function

execution-time