非同期処理

非同期とは

コールバック関数が代表される処理。

例１

function funcA(text) {
    text(); // funcBの処理
    console.log('3'); // funcAの処理
}

// コールバック関数 → funcAの呼び出し時に引数に指定される
function funcB() {
    console.log('2');
}

//実行
console.log('1');
setTimeout(() => {
    funcA(funcB);
}, 1000);
console.log('4');

これは1,4,2,3で出力。

例２

function funcA(text) {
    setTimeout(() => text(), 1000)
    console.log('3'); 
}
function funcB() {console.log('2');}

console.log('1');
setTimeout(() => {
    funcA(funcB);
}, 1000);
console.log('4');

これは1,4,3,2で出力。

同期処理は上から順番に実行されること。頭の中では、

(例1は

①１が出力

②setTimeout実行→1秒後funcAが実行

③funcAが実行

④textが実行→funcBが実行

⑤2が出力

⑥funcB終了→funcAの続きを実行

⑦3が出力

⑧funcA終了→ルートの実行に戻る

⑨4出力)

と思ってしまう。

例1,2も同期処理で実行コードの順番に実行されたら通常1→4できれいに並ぶはず、、、

実際、setTimeoutを抜くと1→4にきれいに並ぶ。

setTimeoutが悪い。setTimeoutなんか本番で使わないんじゃない？

しかし、本番のサイトとかではapiからgetしたりdbにconnectするのにわずかだが時間がかかる。

それを疑似的に作った場合setTimeoutが丁度いい。

どのように処理されているのか？

例1は

①１が出力

②setTimeout実行

③4出力

④1秒後funcAが実行→funcAが実行

⑤textが実行→funcBが実行

⑤2が出力

⑥funcB終了→funcAの続きを実行

⑦3が出力