JavaScriptはシングルスレッドであり、同期実行モデルを備えています。シングルスレッドとは、一度に1つのコマンドが実行されることを意味します。同期とは、一度に1つずつ、つまり、コードが表示されるために一度に1行のコードが実行されることを意味します。したがって、JavaScriptでは一度に1つのことが起こります。
実行コンテキスト
JavaScriptエンジンは、ブラウザー内の他のエンジンと対話します。JavaScript実行スタックでは、下部にグローバルコンテキストがあり、関数を呼び出すと、JavaScriptエンジンがそれぞれの関数の新しい実行コンテキストを作成します。呼び出された関数が終了すると、その実行コンテキストがスタックからポップされ、次に次の実行コンテキストがポップされます。
例えば
function abc()
{
console.log('abc');
}
function xyz()
{
abc()
console.log('xyz');
}
var one = 1;
xyz();
上記のコードでは、グローバル実行コンテキストが作成され、このコンテキストvar oneに格納され、その値は1になります... xyz（）呼び出しが呼び出されると、新しい実行コンテキストが作成され、変数を定義した場合xyz関数では、これらの変数はxyz（）の実行コンテキストに格納されます。xyz関数でabc（）を呼び出し、次にabc（）実行コンテキストが作成されて実行スタックに配置されます... abc（）が終了すると、コンテキストがスタックからポップされ、次にxyz（）コンテキストがスタックすると、グローバルコンテキストがポップされます...
次に非同期コールバックについてです。非同期とは、一度に複数のことを意味します。
実行スタックと同様に、イベントキューがあります。JavaScriptエンジンのイベントに関する通知を受け取りたい場合は、そのイベントをリッスンして、そのイベントをキューに入れることができます。たとえば、Ajax要求イベント、またはHTTP要求イベントです。
上記のコード例に示すように、実行スタックが空の場合は常に、JavaScriptエンジンは定期的にイベントキューを調べ、通知するイベントがあるかどうかを確認します。たとえば、キューにはajaxリクエストとHTTPリクエストの2つのイベントがありました。また、そのイベントトリガーで実行する必要のある関数があるかどうかも確認します。そのため、JavaScriptエンジンはイベントについて通知を受け、そのイベントで実行するそれぞれの関数を認識しています...したがって、JavaScriptエンジンは、例の場合、ハンドラー関数。例：AjaxHandler（）が呼び出され、常に関数が呼び出されると、その実行コンテキストが実行コンテキストに配置され、関数の実行が終了し、イベントajaxリクエストもイベントキューから削除されます。 ... AjaxHandler（）が完了すると、実行スタックは空になるので、エンジンは再びイベントキューを調べ、次にキューにあったHTTPリクエストのイベントハンドラー関数を実行します。イベントキューは、実行スタックが空の場合にのみ処理されることに注意してください。
たとえば、JavaScriptエンジンによる実行スタックとイベントキューの処理を説明する以下のコードを参照してください。
function waitfunction() {
var a = 5000 + new Date().getTime();
while (new Date() < a){}
console.log('waitfunction() context will be popped after this line');
}
function clickHandler() {
console.log('click event handler...');
}
document.addEventListener('click', clickHandler);
waitfunction(); //a new context for this function is created and placed on the execution stack
console.log('global context will be popped after this line');
そして
<html>
<head>
</head>
<body>
<script src="program.js"></script>
</body>
</html>
次に、Webページを実行してページをクリックし、コンソールに出力を表示します。出力は
waitfunction() context will be popped after this line
global context will be emptied after this line
click event handler...
JavaScriptエンジンは、実行コンテキスト部分で説明されているようにコードを同期的に実行しており、ブラウザーは非同期でイベントキューに物事を入れています。したがって、完了するまでに非常に長い時間がかかる関数は、イベント処理を中断する可能性があります。イベントのようにブラウザーで発生することはJavaScriptによってこのように処理されます。実行されるはずのリスナーがある場合、実行スタックが空のときにエンジンがそれを実行します。また、イベントは発生順に処理されるため、非同期の部分は、エンジンの外部で何が発生しているか、つまり、外部のイベントが発生したときにエンジンが何をすべきかについてです。
したがって、JavaScriptは常に同期しています。
