JavaScriptのコールバック関数についてのメモです。
コールバック関数とは、ある関数の引数に渡される関数のことです。
Java Scriptはソースコードを上から順番に実行してくれる訳ではありません。
意図した順番に処理を実行するために使われるのがコールバック関数です。
コードは全てプレイグラウンドで実行できますので、試してみてください。
コールバック関数を使わない場合
hello,byeの順番に出力したいのですが、
次のようなソースコードだとbye=>helloの順に出力されてしまいます。
//1秒待ってhelloと出力する関数の定義
function hello() {
setTimeout(() => {
console.log('hello')
}, 1000);
}
//byeと出力する関数の定義
function bye(){
console.log('bye');
}
//処理の実行
aisatsu();
function aisatsu() {
hello();
bye();
}
出力結果
bye
hello
コールバック関数を使った場合
では、hello=>byeの順番に出力するためにコールバック関数を使ってみましょう。
byeの関数をhelloのコールバック関数として渡しています。
byeの関数の書き方も変わってますね。byeの関数をそのまま渡すのではなく、一度変数に入れるようにしました。
アロー関数の書き方については、こちらを見てみてください。
//1秒待ってhelloと出力する関数の定義
//コールバック関数でbyeを渡す
function hello(callback) {
setTimeout(() => {
console.log('hello');
callback(); //ここでコールバック関数のbyeを実行
}, 1000);
}
//byeと出力する関数の定義を変数byeに入れる
const bye = () =>
console.log('bye');
//処理の実行
hello(bye);
出力結果
hello
bye
hello、byeの順番で出力できましたね。
(参考)setTimeout関数
次の場合は1秒後に処理が実行されます。
setTimeout(() => {
//処理
}, 1000);