有什么方法可以強制在 javascript 循環中重新繪制 DOM 元素？

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 個解決方案

解決方案1
3 已采納 2020-03-28 03:21:34

有什么方法可以強制在 javascript 循環中重新繪制 DOM 元素？

問題描述

1 個解決方案

解決方案1 3 已采納 2020-03-28 03:21:34

解決方案1
3 已采納 2020-03-28 03:21:34