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で良くね?)