Question

这是我要解决的问题的简化示例。

我有一个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>

浏览器重涂的正常建议是使用window.setTimeout（），但这在循环中不起作用。

Answer 1

问题是while的同步阻止-在当前Javascript停止运行并产生让浏览器处理其他内容（例如重绘）之前，不会发生重绘。

您可能会在循环内部添加一些异步延迟-设置innerHTML后，请等待50毫秒，然后继续：

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
async function mirror() {
  var userText = "Your text will go here";

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

<p id="target"></p>

也就是说，这有点像X / Y问题。最好完全避免使用prompt-它会阻止渲染（导致此类问题），并且对用户不友好。考虑改用创建适当的模式输入，然后可以创建所需的逻辑而不会阻塞浏览器。

有什么办法可以强制在JavaScript循环内重新绘制DOM元素？

1 个答案: