お久しぶりですが、

ダイヤルバック

コールバックとは、後で実行されるコードです.
一般的な矢印関数では、{}の部分をコールバックと見なすことができる.

コールバックの非同期処理

イベント中心の言語JavaScriptでは、結果を待たずに複数の関数を入力すると、次のイベントが続行されます.(非同期特性)
ほとんどの場合、JavaScriptを使用するには、サーバからデータをインポートするか、タイマなどの外部APIを使用する必要があります.これは非同期です.

コールバック関数

したがって、下部のコードを入力すると

/* test.js : 콜백 함수의 비동기 처리 */
setTimeout(() => {
    console.log("< first >");
}, 3000);

setTimeout(() => {
    console.log("< second >");
}, 2000);

結果:

先に実行する遅延時間がより短いsecondが見えます.setTimeout(callback, delayTime)は、パラメータでコールバックと遅延を受信し、遅延後にコールバックを実行する内蔵関数です.
もう一つ分かりやすい例を見てみましょうか?

// test4.js : 콜백 함수의 비동기 처리
console.log("1 : setTimeout 실행 전")
setTimeout(()=>{
    console.log("2 : setTimeout의 콜백 실행중");
}, 0);

console.log("3 : setTimeout 실행 후")

結果:
setTimeout()自体は非同期ブラウザが提供するAPI関数であるため、0秒遅延後に実行されるとコールバックキューに入る.どういう意味か分からない場合は、ここをクリックしてください。
コールバックキューの関数は呼び出しスタックがすべて終了した後に実行されるため、setTimeout()のコールバック関数の2番目のログが最も遅く撮影されることがわかります.

コールバックの同期処理

JavaScriptの計算方法は、内部処理か外部処理かによって異なります.先ほど、外部から導入した場合は同期処理と言いました.内部で行うとは、外部から各種データやAPIをインポートしない(例えば、カスタム関数のみを使用する)場合に行うことである.

カスタム関数

// test3.js : 사용자 정의 함수의 동기 처리
function fakeSetTimeout(callback){
    callback();
}

console.log("1 : fakeSetTimeout 함수 만들었음")

fakeSetTimeout(function() {
    console.log("2 : fakeSetTimeout 의 콜백함수 실행중 : HELLO");
})

console.log("3 : fakeSetTimeout 실행 종료됨")

結果:

番号順、順番に実行されるカスタム関数が表示されます.

非同期処理から同期処理への変換

非同期処理の場合、同期(=順番)したい場合はどうすればいいですか?

// test2.js : 콜백 함수의 동기 처리
setTimeout(()=>{
    setTimeout(()=>{
        console.log("< second >");
    }, 2000);
    console.log("< first >");
}, 3000);

結果:

firstが3秒後に実行され、secondが表示されます.
このようにして、コールバックに間欠的なコールバック構造を実装することができます.

コールバック地獄

同期処理のためにコールバックをネストし続けると、ユーザーはコールバック地獄に陥る可能性があります.
この問題を解決するために、ES 6構文からpromise ES 7である.6以降、async/awaitをサポートします.
これは次の授業だ...!!