JavaScript ・ タイマー・非同期
setTimeout()
指定した時間のあとに実行する
指定したミリ秒だけ待ってから、関数を1回実行します。一定間隔で繰り返すときは setInterval() を使います。
01
サンプルコード
HTML
1<p id="msg">3秒後にメッセージが変わります</p>
JS
1console.log('開始');
2
3setTimeout(() => {
4 document.querySelector('#msg').textContent = '3秒たちました';
5 console.log('3秒後');
6}, 3000);
7
8console.log('setTimeout の次の行');
02
実行結果
ブラウザでの表示3秒後に文字が変わります。「もう一度実行」で最初から確認できます
コンソール
- console.log() の出力がここに表示されます
03
解説
setTimeout(関数, ミリ秒) は、指定した時間が過ぎたあとに関数を1回だけ実行します。1000ミリ秒が1秒です。
待っている間も、後に続く処理は止まらずに先に進みます。上の例のコンソールでは、「setTimeout の次の行」が「3秒後」より先に表示されます。
setTimeout() は番号（タイマーID）を返します。その番号を clearTimeout() に渡すと、実行前に取り消せます。
04
応用例・注意点
タイマーの関数
| 関数 | 説明 |
|---|---|
setTimeout(fn, ms) | ms ミリ秒後に1回実行 |
clearTimeout(id) | setTimeout を取り消す |
setInterval(fn, ms) | ms ミリ秒ごとに繰り返し実行 |
clearInterval(id) | setInterval を止める |
1秒ごとにカウントダウンする
setInterval で繰り返し、0になったら止めます。
HTML
1<p id="count">5</p>
JS
1let n = 5;
2const timer = setInterval(() => {
3 n--;
4 document.querySelector('#count').textContent = n;
5 if (n === 0) clearInterval(timer);
6}, 1000);
注意点
- 01指定した時間ちょうどに実行される保証はありません。ほかの処理が重いと遅れることがあります。
- 02アニメーションには、setInterval より CSS の transition や requestAnimationFrame() が向いています。