Javascriptにおける非同期処理の扱い方

Javascriptでは基本的に各々の処理は非同期です。わかりやすく言うと実行順序を指定することができません。

例えば以下のようなコードがあったとします。

console.log('1');
setTimeout(function() {
  alert('2');
}, 3000);
console.log('3');

このとき以下のように表示されます。

1
3
2

つまり、上から順に実行されるのではなく、先に処理が終わったものから結果を出力するということです。今回では二番目の処理が「3秒経ってから’2’を表示する」という処理だったので先に’3’が表示されてしまいました。

これを、’2’を表示してから’3’を表示するというように順序を指定するにはどうすればいいでしょうか。 いろいろな方法がありますが今回は一番シンプルなコールバックという方法で解決します。

console.log('1');
function three(){
  console.log('3');
}
setTimeout(function() {
  alert('2');
}, 3000, three());

このように、関数に関数を引数として渡すという考え方がコールバックです。このように記述すると

1
2
3

の順に出力されるはずです。