JavaScript callstack

非同期実行を理解する前に、JavaScriptのコード実行プロセスについて説明します.
JavaScriptは単一スレッド言語です.これはcallstackが一度に1つのタスクしか実行しないことを意味します.
call stackはスタック形式のリポジトリであり、JavaScriptエンジンは関数呼び出しに関する情報を管理します.

function stack3() {
  console.log('function stack3 is called')
  throw new Error('에러발생!!')
}

function stack2() {
  console.log('function stack2 is called')
  stack3()
}

function stack() {
  console.log('function stack is called')
  stack2()
}

stack()

3つの関数スタック、スタック2、スタック3があります.

スタック関数:スタック2関数を呼び出し、スタック2関数を呼び出しスタックにプッシュします.

stack 2関数:stack 3関数を呼び出し、stack 3関数をcallstackにプッシュします.

スタック3関数:Error(throw)

stack overflow

function overflow() {
  overflow()
}

overflow()

この関数はoverflow()関数を再帰的に呼び出すコードです.
実行すると、関数は回転し続け、callstackに積み上げられ、callstackサイズを超えるエラーが発生します.

タスクキュー

Webブラウザでは、コードが16ミリ秒以内に実行されないと、画面が切断されます.しかし、すべての仕事は16 ms以内に完成することはできません.したがって、ブラウザは、イベントの発生を待つか、ビッグデータの処理が完了するのを待つかにかかわらず、次の順序で処理します.

が待つべきことはJavaScriptエンジンではなく、Web APIを介してブラウザに渡されます.ここでは、前の操作が完了した後に実行されるcallbackを登録します.

転送が完了すると、結果とコールバックがワークキューに追加されます.

ブラウザでは、callスタックが空になるたびに、ワークキューに追加されたタスクがインポートされ、コールバックが実行されます.このプロセスは、イベントループ

と呼ばれる繰り返しである.

setTimeout(() => {
  console.log('B');
}, 0); // 작업 큐에 callback이 추가됨

console.log('A');

A
B

このコードでは、ブラウザがsettimeoutのcallbackをワークキューに登録し、callstackが空になった後にワークキューのcallbackを取得して実行します.

callback

JAvascriptは、コードコンパイル後にコード作成順に同期して優先的に実行します.
ただし,Webはユーザの行動を予測できないため,非同期コードを実行する必要がある.
コールバック関数とは?
これは、後で呼び出される関数、例えば他の関数に渡されるパラメータやオブジェクトとしてのpropertyを意味します.

console.log('1');
setTimeout(function() {
	console.log('2')
}, 1000)
console.log('3')

// 결과
1
3
2

コードが同期して実行される場合、console.log(「1」)を実行しsettimeoutに遭遇した場合、ブラウザAPIに転送し、Task Queueで待機し、コンソールで待機します.log(「3」)を実行し、1秒後にsettimeout関数を実行します.このとき非同期で実行される関数をcallback関数と呼ぶ.
これは、コード実行における非同期性を管理する一般的な方法です.
JavaScriptでコードが非同期で実行されている場合

サーバAPI呼び出し

DB呼び出し

settimeout関数

イベントハンドル

無限ループ

地獄

非常に柔軟で便利な非同期言語ですが、非同期言語を順次使用すると콜백지옥に閉じ込められます.

setTimeout(function() {
    console.log('A');
    setTimeout(function() {
        console.log('B');
        setTimeout(function() {
            console.log('C');
            setTimeout(function() {
                console.log('D');
            }, 4000);
        }, 3000);
    }, 2000);
}, 1000);

このコードは、タイマを順番に実行するcallback関数構造です.
この콜백지옥の問題は、まず可読性が悪すぎて、エラーが発生したときに問題がどこにあるかを理解し、修正するのが難しいことです.