嗨，我正在尝试在文本框中连续显示 while 循环的迭代。但是，浏览器会一直等到循环结束，然后才显示最后的迭代。
我正在使用这个循环来运行一个复杂的函数，这意味着迭代会更慢，如果在控制台中显示，可以看到：
例如，我正在尝试做这样的事情。在 HTML 中：
<p>
<label>This is generation number</label>
<input type = "number"
id = "generation"
/>
</p>
在 JavaScript 中：
function Run(){
var i=0;
while (i<500) {
document.getElementById('generation').value= i;
i++
}
}
您不能同步进行（无while循环）。这会锁定浏览器并且不允许其他任何事情发生。不会发生任何绘制周期，并且看起来没有任何变化。
尝试将其分解为一个只执行一个步骤的函数，然后在超时时间内一遍又一遍地调用它。
var updateEl = document.getElementById("generation");
var i;
function doStep() {
//super crazy code
updateEl.value = i;
i++;
if (i < 500) {
timeout = setTimeout(doStep);
}
}
function Run() {
i = 0;
doStep();
}如果你需要这个过程尽可能快，你想要
setTimeout。如果您想与画布的动画缓冲区同步或速度不是真正的问题，请使用requestAnimationFrame。
更新
为了匹配@Brian 在下面的评论中所说的：
var updateEl = document.getElementById("generation");
function doStep(i) {
//super crazy code
updateEl.value = i++;
if (i < 500) {
timeout = setTimeout(() => doStep(i));
}
}
function Run() {
doStep(0);
}<p>
<label>This is generation number</label>
<input type="number" id="generation"/>
</p>
<button onclick="Run()">Run</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句