🦅
非同期処理 (2): Javascript Callback関数について
概要
前回の記事でJavascriptの動作の流れと、非同期処理、同期処理について書きました。
非同期処理を理解するためには軽く読むのをお勧めします。
今回は非同期処理の順番を制御するために利用する Callback関数 / Promise / async と awaitについて、まずは Callback関数を簡単にまとめました。
Callback関数
Callback関数は文字通りに後から呼び出せる関数です。
つまり関数を登録しておいて、特定のイベントが終わったとか特定のタイミングで呼び出せます。
別の関数にパラメータとして受け取られて関数の内部で実行されます。
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum); // 関数の内部で実行
}
myCalculator(5, 5, myDisplayer);
Callback関数を使うパターンは以下があります。
ユーザのイベント処理
ユーザーがいつボタンを押すかわからないため
const el = document.getElementById("demo");
const onClick = () => {
console.log("on Click!");
};
// click eventが発生したときに onClick関数を呼ぶ
el.addEventListener("click", onClick);
ネットワーク応答処理
例えばAPI処理があります。APIからいつ結果が来るかわからないため
特定のタイミングの処理
処理を遅延させて決めた時間に処理させるため
//3秒が過ぎたらdemo要素のhtmlが変わる
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "Changed!!";
}
Callback hell
Callback関数はパラメータとして受け取られて関数の内部で実行されると言いましたが、これが繰り返されると、ネストが深くなるCallback hellになります
Callback hellはPromiseやasync/awaitで解決します。
参考
Discussion