这是我试图解决的问题的简化示例。
我有一个 javascript 循环，在每次迭代中，我都会要求用户提供一些输入，然后希望在下一次迭代期间将其显示在浏览器中。目前，它将所有重绘操作保存到脚本末尾，然后在 block 中处理它们。有没有办法在循环进行时强制浏览器刷新/重绘？
这是代码。
<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() 但这在循环内不起作用。
最佳答案
同步阻塞 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 - 有什么方法可以在 javascript 循环内强制重新绘制 DOM 元素吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60896839/