LANG SELRCT

コードを書く場所についてはこちら

2019年2月16日土曜日

コールバック関数の理解を試みた


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.gs
run2();
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.gs
run3();
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.gs
run4();
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 (コールバック関数)