「For」ループのコードはどのように実行されますか？ Javascript

Question

私の例では、私はCanvas要素に2つの別々のテキストを印刷しています。どちらも内部から1つの関数を呼び出すよう呼び出されました。関数の中に私は、指定された時間の間、キャンバスをクリアし、最初のテキストを印刷する必要がありますforループを持っています。 forループが終了すると、2番目のテキストが出力されます。その後、setIntervalは関数を再度呼び出して、Canvasを完全にクリアし、forループ中の最初のテキストとループの最後の2番目のテキストのみを表示します。しかし、2番目のテキストは最初のテキストと同時に印刷され、決してクリアされません。したがって、for-loopのコードは、for-loopが終了するまで実行されないようです。しかし、私もfor-loopの内側と外側にconsole.logを設定し、for-loop内のコンソールログはfor-loopの最後ではなくリアルタイムで実行します。だから、console.logはこのような状況で特別なケースです.... forループ内の他の関数呼び出しは、実行前に終了まで待たなければなりませんか？注：setIntervalのためにスニペットが実行されてから3秒後にテキストは表示されません。スニペットページは遅れがちですが、forループが1.5秒間実行されるためです。ちょうどそれが私のテキストエディタでそれをしていなかったので、今気づいた。このようclearRect()やdrawText()など

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
function drawText(text, x, y, color, size) { 
 
    ctx.font = size + 'px sans-serif'; 
 
    ctx.fillStyle = color; 
 
    ctx.fillText(text, x, y); 
 
} 
 

 
function test() { 
 
    var beginTime = Date.now(); 
 

 
    for (; Date.now() < beginTime + 1500;) { 
 

 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    drawText('Clear canvas and only show this', 100, 100, 'black', '20'); 
 

 
    // console.log('for loop ran'); 
 
    } 
 

 
    drawText('Dont display this till for-loop stops clearing canvas', 100, 200, 'red', '20'); 
 

 
    // console.log('for loop finished'); 
 
} 
 

 
setInterval(test, 3000);

<canvas id="canvas" width="800" height="600" style="border: 1px solid black"></canvas>

Answer 1

機能はすぐにブラウザがチャンスを持っているとしてアクションを実行するための唯一の要求です。しかし、forループの実行が終了するまで、その機会は来ません。ブラウザが最終的にキャンバスを更新する機会を得た場合、キャンバスは一度にリクエストを処理します。つまり、最終的なメッセージのみが表示されます。