callback

2910 ワード
promise JavaScript callback テキストリンク
コールバック関数
コールバック関数は、後で呼び出される関数であり、それ自体は特殊な宣言や構文の特徴ではなく、呼び出し方法によって区別されます.
コード呼び出し関数ではなく、イベントが発生したり、ある時点で呼び出されたりする関数です.
JavaScriptでコールバック関数を使用して非同期プログラミングを行います.
例
  • loadScript()関数
    • function loadScript(scriptUrl) {
    let script = document.createElement('script');
    script.src = scriptUrl;
    document.head.append(script);
}
  • loadScript関数は<script src="scriptUrl">ドキュメントに動的に作成して追加します.
  • ブラウザが自動ローディング<script>ラベル上のscriptUrlローディング完了後実行scriptUrl
  • loadScript()お呼び
    • loadScript('script.js');

newFunc(); // Error: newFunc is not defined
  • ./script.js内部
    • function newFunc() {
  console.log("success!");
}
  • パス上にあるスクリプトファイルを読み込み、実行します.
  • スクリプトファイル「非同期」が実行されます.ファイルのロードを開始しても、実行はloadScript()関数が完了してから実行しなければならないからです.
  • loadScript()のコードは、スクリプトファイルのロードが完了するまで待機しません.
  • したがって、loadScript()関数を呼び出すとスクリプトファイル内部関数が呼び出され、エラーが発生します.スクリプトファイルを読み終えなかったからです.
    • コールバック関数の使用
  • loadScript()関数
    • function loadScript(scriptUrl, callback) {
    let script = document.createElement('script');
    script.src = scriptUrl;
    script.onload = () => callback(script);
    document.head.append(script);
}
  • loadScript()お呼び
    • loadScript('./script.js', function() {
  newFunc();
});
  • loadScript()埃callback関数を因数として追加します.
  • スクリプトのロードが完了すると、実行するcallback関数、newFunc()正常に動作します.
    • エラーコントロール
    エラー優先コールバックモード
  • loadScript()関数
    • function loadScript(scriptUrl, callback) {
    let script = document.createElement('script');
    script.src = scriptUrl;
    script.onload = () => callback(script);
    script.onerror = () => callback(new Error(`에러 발생`);
    document.head.append(script);
}
  • loadScript()お呼び
    • loadScript('./script.js', function(error, script) {
  if(error) {
  	// 에러 처리
  } else {
  	// 스크립트 파일 로딩이 성공적으로 끝남
  }
});
  • 初回引き継ぎ:使用callbackエラーが発生した場合は呼び出すcallback(err).
  • 2回目以降引き継ぎ:エラーがなければ動作成功、呼び出すcallback(null, result1, result2...)
    • 約束でカルバック地獄を避ける
    複数の関数を順次操作する場合は、コールバックにコールバックを追加して呼び出すことができます.
    しかし,この過程を繰り返すとコードの重なりが深まり,可読性が低下し,「コールバック地獄」(callback hell)と呼ばれる.
    このような現象を避けるために、使用promiseリファレンス
    https://ko.javascript.info/callbacks
    MySQL・ノート2
    TIL 55 day第4章コールバック関数