JavascriptにおけるsetTimeoutとは
- nミリ秒後に何かを実行したい場合に使う関数
- 下記の例だと、コンソールに
nowと出力した1000ミリ秒=1秒後に1 sec. laterと出力される
whatIsSetTimeout.js}
function hoge() {
console.log('now');
setTimeout(function () {
console.log('1 sec. later');
}, 1000);
}
hoge();
// now
// 1 sec. later # 1秒後
使い方
setTimeout(callback, delay)
| 引数 | 説明 |
|---|---|
| callback | 実行したい関数 |
| delay | 何ミリ秒後に実行するか (初期値は0) |
利用シーン
一連の処理の直後に何かを実行したい場合
sample.js}
function fuga() {
console.log('process1');
console.log('process2');
setTimeout(function () {
console.log('setTimeout process');
});
console.log('process3')
}
fuga();
setTimeoutの第2引数を指定しなかったので0が代入され、
この関数は下記のような順序で処理される
result}
process1
process2
process3
setTimeout process
「0ミリ秒後ってなんだよ」問題
実験その1
setTimeoutの引数に0, 1, 2を与え、それぞれ同じ関数内で実行してみる
test1.js}
setTimeout(()=>console.log(0), 0);
setTimeout(()=>console.log(1), 1);
setTimeout(()=>console.log(2), 2);
result1}
0
1
2
結果はなんとなく想定通りだが、0秒と1秒を指定したときの違いが分からないので次の実験に移る。
実験その2
実験その1から記述の順番を逆転させてみる
test2.js}
setTimeout(()=>console.log(2), 2);
setTimeout(()=>console.log(1), 1);
setTimeout(()=>console.log(0), 0);
result2}
1
0
2
え、、、1が0より先に来るのか・・・
結論
この他にもいろいろ試したが、
setTimeoutの第2引数に0を与えるのと1を与えるのは同じであることが判明した。
同じなので、単純に記述した順に実行される。
その他にも少数(0以上1以下)・マイナスなどで試したが、1以下の数値を指定しても同じ結果となった。
心の声
(だったら初期値も1で良くね?)