質問に入る前に。Event Loop とは、 http://en.wikipedia.org/wiki/Event_loopを参照していることを述べさせてください。これはブラウザが実装するものです。詳細については、http: //javascript.info/tutorial/further-javascript-features/events-and-timing-depthを参照してください。
この質問は難しくて長いので、我慢してみてください! そして、私はすべての答えに感謝します!
そう。現在、私が理解しているように、JavaScript には単一のメイン スレッドがあります (つまり、ほとんどのブラウザー環境で)。したがって、次のようなコード：
for (var color = 0x000; color < 0xfff; color++) {
$('div').css('background-color', color.toString(16));
}
黒から白へのアニメーションを生成しますが、コードが処理された後にレンダリングが行われるため、それはわかりません (次のティックが発生すると、ブラウザーはイベント ループに入ります)。
アニメーションを見たい場合は、次のようにします。
for (var color = 0x000; color < 0xfff; color++) {
setTimeout(function() {
$('div').css('background-color', color.toString(16));
}, 0);
}
上記の例では、setTimeout がブラウザのイベント ループ スタックに新しいイベントをプッシュするため、目に見えるアニメーションが生成されます。このスタックは、何も実行されていない後に処理されます (次に何をすべきかを確認するためにイベント ループに入ります)。
この場合、ブラウザーは 0xfff (4095) イベントをスタックにプッシュしているようです。各イベントは、その間にレンダリング プロセスで処理されます。それで、私の最初の質問 (#1) は、レンダリングが正確にいつ行われるかということです。イベント ループ スタック内の 2 つのイベントの処理の間に常に発生しますか?
2 番目の質問は、私が提供した javascript.info ウェブサイト リンクのコードに関するものです。
...
function func() {
timer = setTimeout(func, 0)
div.style.backgroundColor = '#'+i.toString(16)
if (i++ == 0xFFFFFF) stop()
}
timer = setTimeout(func, 0)
....
ここでの私の質問は、ブラウザーが新しい「レンダリング」イベントを、イベント ループ スタックに到達するたびにプッシュするdiv.style. ... = ...かどうかです。しかし、setTimeout-call のために最初にイベントをプッシュしませんか? それで、ブラウザは次のようなスタックになりますか？
setTimeout event
render event
setTimeout 呼び出しが div スタイルの変更前に処理されたので? スタックがそのように見える場合、次にブラウザーがイベント ループに入ったときに setTimeout のコールバックを処理し、次のようになると思います。
rendering event
setTimeout event
rendering event
前の setTimeout 呼び出しで生成されたレンダリング イベントを続行しますか?