async/awaitやPromiseを理解する前段階として
「コールバック関数」と呼ばれる仕組みについて個人的に理解を試みた備忘録です
いつ使う？
時間がかかる処理を実行するとき、その処理結果を待って次の処理に渡したい
そんなときに使える
どう使う？
関数を引数で渡す
...とにかくやってみる
まずは普通にgetValue1, getValue2の順番で実行するコードを書いてみる
コード1.gs
run1();
function run1() {
getValue1();
getValue2();
}
function getValue1() {
console.log('hello');
}
function getValue2() {
console.log('world');
}
|
意訳run1を実行する この機能がやること getValue1()を実行する getValue2()を実行する この機能がやること helloをログに出す この機能がやること worldをログに出す |
run1() を実行すると
hello
world
という順番でログが出力される
getValue1の処理に時間がかかる場合のコードを書いてみる
getValue1の処理が終わるのを待たずにgetValue2()が実行される
コード2.gsrun2();
function run2() {
setTimeout(getValue1, 1000);
getValue2();
}
function getValue1() {
console.log('hello');
}
function getValue2() {
console.log('world');
}
|
意訳run2を実行する この機能がやること getValue1()を1000ミリ秒後に実行する getValue2()を実行する この機能がやること helloをログに出す この機能がやること worldをログに出す |
run2() を実行すると
world
hello
という順番でログが出力される
getValue1の処理が終わってからgetValue2の処理を実行したい
ここでコールバック関数を使ってみる
コード3.gsrun3();
function run3() {
setTimeout(function() {getValue1(getValue2)}, 1000);
}
function getValue1(arg) {
console.log('hello');
arg();
}
function getValue2() {
console.log('world');
}
| 意訳run3を実行する この機能がやること getValue1にgetValue2関数を引数で渡して1000ミリ秒後に実行する この機能がやること helloをログに出す argに入っているgetValue2関数を実行する この機能がやること worldをログに出す |
run3() を実行すると
hello
world
という順番でログが出力される
コード3.gsのsetTimeoutの第一引数が長いので
myFunctionという名前の関数を作って書き換えてみる
コード4.gsrun4();
function run4() {
setTimeout(myFunction, 1000);
}
function myFunction() {
getValue1(getValue2);
}
function getValue1(arg) {
console.log('hello');
arg();
}
function getValue2() {
console.log('world');
}
| 意訳run4を実行する この機能がやること myFunctionを1000ミリ秒後に実行する この機能がやること getValue1にgetValue2関数を渡して実行する この機能がやること helloをログに出す argに入っているgetValue2関数を実行する この機能がやること worldをログに出す |
run4() を実行すると
hello
world
という順番でログが出力される
このあとasync/awaitとPromiseの理解も試みるともうちょっと理解できるかも
参考
Callback function (コールバック関数)
