非同期

こんにちは開発者!🤗🤗 本稿では、JavaScriptの非同期動作を検討します.

Asynchronous programming is a means of parallel programming in which a unit of work runs separately from the main application thread and notifies the calling thread of its completion, failure, or progress.

概念に深く飛び込む前に、私はあなたがSetTimeoutとcallback機能がどのように働くかについての明確な理解のためにこのシリーズで記事を通過することを勧めます.
この記事では以下を説明します.

呼び出しスタック

イベントループ

コールバックキュー

非同期プログラミングのビジュアル表現

呼び出しスタック

JavaScriptは同期の単一スレッド言語で、これは1つの呼び出しスタックだけを持っており、同時に1つのことを行うことができます.

この呼び出しスタックはJSエンジン内に存在し、JavaScriptのすべてのコードはこの呼び出しスタック内で実行されます.

例を見てみましょう.

function myFunction(){
    console.log("inside function");
}

myFunction();
console.log('Program End');

JSコードを実行するたびに、グローバル実行コンテキストが作成され、呼び出しスタック内にプッシュされます.

任意の関数では、別の実行コンテキストが作成され、呼び出しスタックにプッシュされます.

次に、関数myFunction そして、コンソールで関数の中に印刷します.

関数の実行が完了すると、呼び出しスタックからポップされます.

現在はグローバル実行コンテキストに進み、コンソールでプログラム終了を出力します.

すべてのプログラム実行コンテキストが完了すると、グローバル実行コンテキストがスタックからポップされます.

したがって、このコールスタックの主な仕事は、その中に何が入ってくるかを実行することです.
しかし、私たちが10秒後に特定のスクリプトを走らせたいか、または機能Aの後に実行される必要があるいくつかの機能Bを持っているなら、その実行は完了します?しかし、呼び出しスタックにはタイマーがありません.
ここでイベントループ＆コールバックキューは我々の救助に来た.のはどのように物事の背後にある作品を見てみましょう!

非同期

これらのすべての非同期プログラミングJavaScriptで可能.
イベントループ

The Event Loop has one simple job — to monitor the Call Stack and the Callback Queue. If the Call Stack is empty, it will take the first event from the queue and will push it to the Call Stack, which effectively runs it. Such an iteration is called a tick in the Event Loop. Each event is just a function callback.

例を使ってこの概念を理解してみてください.

console.log("start");

setTimeout(function callbackFn(){
    console.log("Callback Function");
},5000)

console.log("end");

上記のコードスニペットの実行中に、コールスタック、コールバックキュー、Web API、コンソールの状態を調べてみましょう.

最初は、すべてが空です.

console.log("start"); がコールスタックに追加される.

console.log("start"); が実行され、start コンソールで.

console.log("start"); がコールスタックから削除される

setTimeout(function callbackFn(){...}) がコールスタックに追加される.

setTimeout(function callbackFn(){...}) が実行される.ブラウザは、Web APIの一部としてタイマーを作成します.それはあなたのためのカウントダウンを処理する予定です.

としては、タイマーの有効期限がいくつかの時間がかかりますが、JavaScriptはsetTimeout(function callbackFn(){...}) 呼び出しスタックから次の行のコードに移動します.

console.log("end"); がコールスタックに追加される.

console.log("end"); が実行され、end コンソールに.その後、呼び出しスタックから削除されます.

タイマーが5000 ms後に終了すると、コールバック関数callbackFn Web APIへの接続先は、コールバックキューにプッシュされます.

イベントループは、呼び出しスタックが空の場合は継続的にチェックし、空の場合はコールバックキューから最初のイベントを受け取り、呼び出しスタックにプッシュします.

callbackFn が実行され、console.log("Callback Function"); 呼び出しスタックに

console.log("Callback Function"); が実行され、Callback Function コンソールで.

console.log("Callback Function"); は呼び出しスタックから削除される.

もう何も実行できないcallbackFn , したがって、呼び出しスタックからも削除されます.

概要

上記のコードスニペットで実行するすべての手順を簡単に要約しましょう.

包み！

あなたの時間をありがとう!一緒に学び成長しましょう.