在Javascript的文本框中连续显示while循环的迭代

嗨，我正在尝试在文本框中连续显示while循环的迭代。但是，浏览器会等待循环完成，然后仅显示最终迭代。
我使用这个循环来运行一个复杂的函数，这意味着迭代将更慢，如果在控制台中显示，则可以看到：

例如，我正试图做这样的事情。 在HTML中：

这是第二代

在Javascript中：

function Run(){

var i=0;

while (i<500) { 

document.getElementById('generation').value= i;

i++
        }
}

函数运行（）{
var i=0；
while（i您不能同步执行（No
while
循环）。这会锁定浏览器，不允许其他任何事情发生。不可能发生绘图循环，而且看起来没有任何变化

尝试将其分解为只执行一个步骤的函数，然后通过超时反复调用它


var updateEl=document.getElementById（“生成”）；
var i；
函数doStep（）{
//超级疯狂代码
updateEl.value=i；
i++；
如果（i<500）{
超时=设置超时（doStep）；
}
}
函数运行（）{
i=0；
doStep（）；
}
同步
循环时，
无法执行此操作。请使用递归方法和
requestAnimationFrame
。当然，在实际代码中，这将更加复杂。您可以将
i
传递给函数-不再有任何副作用！
function Run(){

var i=0;

while (i<500) { 

document.getElementById('generation').value= i;

i++
        }
}