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

问题描述

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

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

我希望能够在执行计算的 id 循环运行时，使用带有内部文本“正在加载...”的消息 for 更新 div，然后删除内部运行后的文本。

如果我在 for 循环之前 console.log("Before") 和 console.log("After") 在 for 循环之后，消息会在循环运行之前和之后打印出来。

但是，如果我将 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>

解决方法

尝试给界面一个机会

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>