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

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

WBOY

リリース： 2016-05-16 17:35:35

オリジナル

1373 人が閲覧しました

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

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