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

Question

嗨，我试图在文本框中连续显示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++
        }
}

Answer 1

你不能同步（没有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。

UPDATE

为了匹配@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>