[JS]コールバック

変更
8/19:callback選手の知識-動機と非同期を追加
8/19:コールバック、高次関数定義の追加

同期と非同期

コールバック関数を理解する前に、同期と非同期とは何かを理解する必要があります.
コールバック関数は非同期処理のモードです.

動機。

同期(Synchronouse)は、コードが順番に実行されることを示します.
現在の操作が完了すると、次のコードが実行されます.
これは私たちが知っているプログラミングプロセスです.
各コードが1つ実行されるため、コードの実行順序を確認します.
ただし、次の操作は、操作が完了するまで停止します.これをブロック(blocking)と呼ぶ.

非同期

実行中のコードが完了していない場合、非同期は次のコードに移動します.
非同期(通常は時間がかかる)タスクをブラウザに渡し、次のコードに移動します.
実行順序は保証されませんが、ブロックを防止できます.
JavaScriptは一度に1つのことしか処理しない単一スレッドです.
ただし、写真をロードするときは、ユーザーの入力を処理するなどのタスクを実行する必要があります.
これが非同期処理が必要な理由です.

コールバック関数とは

コールバック関数とは、パラメータとして受信される関数をコールバック関数と呼ぶ.
パラメータとして関数を受け入れる関数を高次関数とも呼ぶ.
高次関数では、必要に応じてコールバック関数を実行して非同期を処理します.

コールバックによる非同期処理

スクリプトを取得する関数loadScript(src).

function loadScript(src) {
    let script = document.createElement('script');
    script.src = src;
    document.head.append(script);
}

loadScriptを実行し、実行関数でロードされたスクリプトを使用したいです.
ロード後、スクリプトを使用する必要があります.
ただし、loadScript以降のコードは関数のロードを待つことはありません.

loadScript('./src.js'); 
func(); // src내의 함수 func() : 존재하지 않는 함수 에러

これにより、ロード後に実行するコードにエラーが発生します.
この問題を解決するために、コールバック関数をloadScriptに2番目のパラメータとして追加します.

function loadScript(src,callback) {
    let script = document.creatElement('script');
    script.src = src;
    script.onload = () => callback(script); // *
    document.head.append(script);
}

//호출
loadScript('./src.js', script => {
    alert(`${script.src}가 로드됨`);
    func() // 사용가능
})

scriptがロードされた後、コールバック関数呼び出しが記述される.
この方式をコールバックベースの非同期プログラミングと呼ぶ.
関数を処理して実行する必要がある引数を指定します.

コールバックエラーハンドル

これまで、スクリプトのロード中にエラーが発生したことは考慮されていません.
これらの操作はよくエラーが発生し、処理できる必要があります.

loadScript(src,callback) {
    let script = document.createElement('script');
    script.src = src;
  
    script.onload = callback(null, script); // *
    script.onerror = callback(new Error(`${src}를 불러오는 도중 에러가 발생했습니다.`)); // **
  
    document.head.append(script);
}

ロードに成功すると、
失敗すると、callback(null,sciprt)が呼び出されます.callback(new Error(...))が呼び出されます.

loadScript(src, (err,script)=>{
    if(err) {
        //error 처리
        return;
    }
  
    // 스크립트 로딩이 성공적일 때 코드
})

コールバック関数の最初のパラメータでは、エラーオブジェクトを含むモードをエラー優先コールバックと呼びます.

ネストコールバック

次に、2つのスクリプトを読み込みます.
2番目のスクリプトは、1番目のスクリプトのロード後にロードされます.

loadScript(src1, script=> {
    alert(`${script.src}로딩 완료`);
    loadScript(src2, script=> {
        alert(`${script.src}로딩 완료`);
    })
})

最初の関数のコールバック関数で、関数を再度呼び出します.
しかし、オーバーラップが発生します.
3番目または4番目のスクリプトをロードしようとすると、ネストはさらに深刻になります.

破滅のピラミッド

後続の非同期運動が増えるにつれて,重なりが深まる.loadScriptを実行し、スクリプトをロードします.エラーがなければ、func1を実行し、スクリプトをロードします.エラーがなければ、func2を実行し、スクリプトをロードします.エラーがなければ、func3を実行し、スクリプトをロードします.エラーがなければ、
.
.

非同期呼び出しが重なり続け、コードが深くなります.
中間に条件文や重複文があると、さらに見えにくくなります.
これらのオーバーラップコードによって生成されたパターンを破壊ピラミッドと呼ぶ.
現在、これらの問題はES 6に続くfunc4によって解決されている.