whileループの繰り返しをJavascriptのテキストボックスに連続して表示する

Question

こんにちは、whileループの繰り返しをテキストボックスに連続して表示しようとしています。ただし、ループが終了するまでブラウザは待機し、最後の反復のみを表示します。
私はこのループを使用して複雑な関数を実行しています。これは、反復が遅くなり、コンソールに表示されると見えることを意味します。

たとえば、私はこのようなことをしようとしています。 HTMLでの ：JavaScriptで

<p> 
     <label>This is generation number</label> 
     <input type = "number" 
      id = "generation" 
      /> 
    </p> 

：

function Run(){ 

var i=0; 

while (i<500) { 

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

i++ 
     } 
} 

Answer 1

あなたは同期（NO whileループ）それを行うことはできません。これにより、ブラウザがロックされ、何か他のことは起こりません。ドローサイクルは起こり得ず、変化するもののようには見えません。

これを1つのステップだけを実行してから、タイムアウトを繰り返して呼び出すことを試みてください。

あなたはできるだけ速くあなたがsetTimeoutをしたいように、このプロセスが必要な場合

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(); 
 
    }

。キャンバスのアニメーションバッファまたは速度と同期したい場合は、実際の問題ではありません。 requestAnimationFrameを使用してください。

@Brianは以下の彼のコメントに言っていることと一致するようにUPDATE

：

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>