有没有办法在javascript循环中强制重新绘制DOM元素？_Javascript

有没有办法在javascript循环中强制重新绘制DOM元素？

javascript

有没有办法在javascript循环中强制重新绘制DOM元素？,javascript,Javascript,下面是我试图解决的一个问题的简化示例我有一个javascript循环，在每次迭代中，我要求用户提供一些输入，然后希望在下一次迭代中在浏览器中显示它。目前，它将所有重绘操作保存到脚本末尾，然后在块中处理它们。是否有办法在循环进行时强制浏览器刷新/重新绘制这是密码 <html> <head> <script> function mirror() { var userText = "Your text will go h

下面是我试图解决的一个问题的简化示例

我有一个javascript循环，在每次迭代中，我要求用户提供一些输入，然后希望在下一次迭代中在浏览器中显示它。目前，它将所有重绘操作保存到脚本末尾，然后在块中处理它们。是否有办法在循环进行时强制浏览器刷新/重新绘制

这是密码

<html>

  <head>
    <script>
      function mirror() {
        var userText = "Your text will go here";

        do {
          document.getElementById("target").innerHTML += userText + "<br>";
          userText = prompt("Enter your text, or click Cancel to finish");
        }
        while (userText !== null);
      }

    </script>
  </head>

  <body onload="mirror()">
    <p id="target"></p>
  </body>

</html>


函数镜像（）{
var userText=“您的文本将转到此处”；
做{
document.getElementById（“目标”）.innerHTML+=userText+“
”；
userText=prompt（“输入文本，或单击“取消”完成”）；
}
while（userText！==null）；
}

浏览器重新绘制的一般建议是使用window.setTimeout（），但这在循环中不起作用。

同步阻塞

而

是问题所在-直到当前Javascript停止运行并允许浏览器处理其他内容（如重新绘制），才会发生重新绘制

您可能会在循环中添加一个轻微的异步延迟-设置

innerHTML

后，等待50毫秒，然后继续：

const delay=ms=>新承诺（resolve=>setTimeout（resolve，ms））；
异步函数镜像（）{
var userText=“您的文本将转到此处”；
做{
document.getElementById（“目标”）.innerHTML+=userText+“
”；
等待延迟（50）；
userText=prompt（“输入文本，或单击“取消”完成”）；
}while（userText！==null）；
}
镜像（）