jsイベントのループ機構について（詳細チュートリアル）

この記事では主に js イベント ループの仕組みを紹介し、例を通してその使用法とテクニックを分析し、一緒に学びます。

この記事では、例を通じて JS のイベント ループ メカニズムの原理と使用法を詳細に分析します。以下がその全内容です:

var start = new Date()
setTimeout(function () {
 var end = new Date
 console.log('Time elapsed:', end - start, 'ms')
}, 500)
while (new Date() - start < 1000) {
}

期待される機能を完了できる他の言語はありますか? Java、Java.util.Timer では、スケジュールされたタスクのソリューションはマルチスレッドによって実装され、タスク オブジェクトはタスク キューに格納され、専用のスケジューリング スレッドが新しいサブスレッドでタスクの実行を完了します

。 js はシングルスレッドです

JavaScript の主な目的は、ユーザーと対話し、DOM を操作することです。これにより、シングルスレッドのみが可能であることが決まります。そうでない場合は、非常に複雑な同期の問題が発生します。

マルチコア CPU の計算能力を活用するために、HTML5 は Web Worker 標準を提案しています。これにより、JavaScript スクリプトは複数のスレッドを作成できますが、子スレッドはメインスレッドによって完全に制御され、動作することはできません。 DOM。したがって、この新しい標準は JavaScript のシングルスレッドの性質を変更しません。

関数呼び出しスタックとタスクキュー

呼び出しスタック

JSが実行されると、関数が呼び出されるときに呼び出しスタックが形成され、戻りアドレス、パラメータ、およびローカル変数がプッシュされます。現在実行中の場合 関数内で別の関数が呼び出されるとき、関数の関連コンテンツもスタックの先頭にプッシュされ、関数が実行された後、呼び出しスタックからポップアウトされます。変数もポップアップされます。複合型の値は単なるポインターであり、その値はまだヒープ内にあり、

イベント ループによってリサイクルされます。 ＆タスクキュー

JavaScriptのメインスレッドには実行スタックとタスクキューがあります

非同期動作時（例：setTimeout、AJAX）、これらのタスクが完了した後、ブラウザ（OS）により非同期動作が実行されます。 、メインスレッドの実行スタックがクリアされた後、タスクキューが読み取られると、ブラウザは事前に定義されたコールバック関数をメインスレッドのタスクキューにプッシュします。メインスレッドは実行を続けるため、無限ループに入ります。これがイベントループです

メインスレッドの実行スタックとタスク キューが周期的に実行され、イベントループが形成されます

setTimeout() は単にメインスレッドは、指定されたコールバック関数を実行する前に、現在のコード (実行スタック) が完了するまで待機する必要があります。現在のコードに時間がかかる場合は、長時間かかる可能性があるため、setTimeout() で指定された時間にコールバック関数が実行されることを保証する方法はありません。

別の例

(function test() {
 setTimeout(function() {console.log(4)}, 0);
 new Promise(function executor(resolve) {
 console.log(1);
 for( var i=0 ; i<10000 ; i++ ) {
 i == 9999 && resolve();
 }
 console.log(2);
 }).then(function() {
 console.log(5);
 });
 console.log(3);
})()

マクロタスクとマイクロタスク

マクロタスクとマイクロタスクは、非同期タスクの 2 つの分類です。タスクを一時停止するとき、JS エンジンはすべてのタスクをカテゴリに応じてこれら 2 つのキューに分割します。まず、最初のタスクがマクロタスク キューから取り出されます (このキューは実行後に取り出されます)。すべてのタスクがマイクロタスク キューから順番に実行され、その後マクロタスク タスクがフェッチされ、両方のキュー内のすべてのタスクがフェッチされるまでサイクルが再開されます。

マクロタスク: スクリプト (コード全体)、setTimeout、setInterval、setImmediate、I/O、UI レンダリング

マイクロタスク: process.nextTick、Promises (ここではブラウザーによって実装されたネイティブ Promise を指します)、Object.observe , MutationObserver

すべてのコード (スクリプト) マクロタスク -> マクロタスク(setTimeout) -> 次のマイクロタスク

Node.js イベントループ process.nextTick & setImmediate

process.nextTick で指定されたタスクは常にすべての非同期タスクの前に発生します

setImmediate で指定されたタスクは常に次のイベント ループで実行されます

process.nextTick(function A() {
 console.log(1);
 process.nextTick(function B(){console.log(2);});
});
setTimeout(function timeout() {
 console.log('TIMEOUT FIRED');
}, 0)

new Promise(function(resolve) {
 console.log('glob1_promise');
 resolve();
}).then(function() {
 console.log('glob1_then')
})
process.nextTick(function() {
 console.log('glob1_nextTick');
})

上記は私が皆さんのためにコンパイルしたものです。将来役に立ちます。みんな役に立ちます。

関連記事:

JavaScriptを使用して2次元の週表示カレンダーを開発する方法

JS抽象ファクトリパターンについて(詳細なチュートリアル)

DjangoとVue構文間の競合を解決する方法

at Nodejs で Web サイトの画像をクロールする方法

以上がjsイベントのループ機構について（詳細チュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。