知っておくべきJavaScriptの知識ポイント: 「シングルスレッドイベント駆動型」の使用_JavaScriptスキル

コードをコピー コードは次のとおりです:

var intervalBody = function(){
コンソール。 log(' 間隔');
}

var startInterval = function(){
setInterval(intervalBody,1000);
}

var timeoutBody = function() {
console.log('timeout');
}

var startTimeout = function(){
setTimeout(timeoutBody,1000);
}

var sleep = function(秒){
var current = new Date().setSeconds(new Date().getSeconds() Second);
while(new Date() < current){ }
}

startInterval();
startTimeout();
sleep(2);
console.log('sleep Once');
sleep(2);
console.log ('sleep again');

実行結果

何が起こったのですか?

実行ルール ルール 1

イベント駆動型シングルスレッド モデル。すべての JavaScript コードが 1 つのスレッドで実行され、JavaScript スレッドは実行のためにイベント キューから一度に 1 つのイベントを取り出します。

ルール 2

ホストには、JavaScript スレッドに加えて、タイマー スレッド (setInterval と setTimeout がこれら 2 つのスレッドの実行をトリガーします)、ブラウザ イベント トリガー スレッド (このスレッドは onclick、onmousemove、その他のブラウザ イベントをトリガーします)、および AJAX もあります。リクエスト スレッド。これらのスレッドによってトリガーされたすべてのイベント (コールバック) がイベント キューの最後に追加されます。

ルール 3

ブラウザが HTML ドキュメントをロードすると、現在の HTML のすべての JS コードがイベント キューの最初のイベントとして扱われ、他のスレッドによってトリガーされたイベント (コールバック) がイベント キューの最後に追加されます。 。

ルール 4

setTimeout と setInterval のコールバックの実行時間は、それらに指定された秒数より長くなければなりません。

ブラウザレンダリングスレッド

JavaScript 実行スレッドが A イベントを実行し、A イベントの実行中に DOM を変更した場合、これらの DOM 変更はインターフェースにすぐには反映されません。代わりに、A イベントが完了すると、JavaScript スレッドが反映されます。このとき、ブラウザのレンダリング スレッドは、DOM の変更結果をレンダリングします。ブラウザのレンダリング スレッドの実行が完了した後も、JavaScript スレッドは実行を続けます。

コード例

コードのコピー コードは次のとおりです。

var sleep = function (秒) {
var current = new Date().setSeconds(new Date().getSeconds() Second);
while(new Date() < current){ }
}

document.body.innerHTML = 'Duan Guangwei';
sleep(5);