こんにちは！コーダーのゆうしです。
JavaScriptで「一定時間後に処理を実行したい」「一定間隔で繰り返し処理を実行したい」という場面はよくあります。そんなときに使うのが setTimeout と setInterval です。名前が似ているので混同しやすいですが、動作は全然違います。この記事では2つの違いと使い方、よく使う実務パターンまでまとめて解説します。
setTimeoutとは？
setTimeout は指定した時間が経過した後に、処理を1回だけ実行する関数です。
setTimeout(処理, 待ち時間(ミリ秒));基本的な使い方
setTimeout(function() {
console.log('3秒後に実行されます');
}, 3000);3000 は3000ミリ秒 = 3秒です。ページ読み込みから3秒後に console.log が1回だけ実行されます。
アロー関数で書く場合
setTimeout(() => {
console.log('3秒後に実行されます');
}, 3000);setIntervalとは？
setInterval は指定した時間間隔で、処理を繰り返し実行する関数です。
setInterval(処理, 間隔(ミリ秒));基本的な使い方
setInterval(function() {
console.log('2秒ごとに実行されます');
}, 2000);2000ミリ秒 = 2秒ごとに console.log が繰り返し実行されます。明示的に停止しない限りずっと動き続けます。
2つの違いをまとめると
| setTimeout | setInterval | |
|---|---|---|
| 実行回数 | 1回だけ | 繰り返し |
| 用途 | 一定時間後に処理を実行 | 一定間隔で繰り返し処理 |
| 停止方法 | clearTimeout() | clearInterval() |
タイマーを停止する
setTimeoutを停止する（clearTimeout）
setTimeout は変数に代入しておくことでキャンセルできます。
const timer = setTimeout(() => {
console.log('これは実行されません');
}, 3000);
// タイマーをキャンセル
clearTimeout(timer);ボタンクリックで処理をキャンセルしたい場合などに使います。
setIntervalを停止する（clearInterval）
setInterval も同様に変数に代入しておくことで停止できます。
const interval = setInterval(() => {
console.log('繰り返し実行中');
}, 1000);
// 5秒後に停止する
setTimeout(() => {
clearInterval(interval);
console.log('停止しました');
}, 5000);setInterval は必ず停止する手段を用意しておくことが大切です。停止せずに放置するとメモリリークの原因になります。
実務でよく使うパターン
① ページ読み込み後にポップアップを表示する
// 5秒後にポップアップを表示
setTimeout(() => {
document.querySelector('.popup').classList.add('is-active');
}, 5000);ページを開いてから少し経ってモーダルやバナーをふわっと表示したいときに使います。
② カウントダウンタイマー
let count = 10;
const timer = document.querySelector('.timer');
const interval = setInterval(() => {
timer.textContent = count;
count--;
if (count < 0) {
clearInterval(interval);
timer.textContent = '終了！';
}
}, 1000);1秒ごとにカウントを減らして、0になったら停止します。キャンペーンサイトやLP上のカウントダウン表示などに使えます。
③ テキストをループして切り替える
const texts = ['Web制作', 'コーディング', 'WordPress'];
let index = 0;
const el = document.querySelector('.rotating-text');
setInterval(() => {
el.textContent = texts[index];
index = (index + 1) % texts.length; // 末尾に来たら先頭に戻る
}, 2000);テキストを一定間隔で切り替えるタイピングアニメーション風の表現などに活用できます。
④ 一定時間後にクラスを削除する
通知バナーやトースト通知を一定時間後に自動で消したいときに使います。
setTimeoutを再帰的に使うとsetIntervalの代わりになる
setTimeout を処理の中で再帰的に呼び出すことで setInterval と同じように繰り返し処理ができます。
function repeat() {
console.log('繰り返し実行');
setTimeout(repeat, 1000); // 処理の中で自分を呼び出す
}
repeat();setInterval との違いは前の処理が終わってから次の処理を開始する点です。setInterval は処理の完了を待たずに次の処理を開始するので、重い処理が重なってしまうことがあります。処理に時間がかかる場合は再帰的な setTimeout を使うほうが安全です。
躓きやすいポイント
setIntervalが止まらない
clearInterval() を呼び出さない限りページを閉じるまで動き続けます。SPAやモーダルの開閉などで setInterval を使っている場合は、不要になったタイミングで必ず clearInterval() を呼び出してください。
時間が正確ではない
setTimeout や setInterval で指定した時間はあくまで「最低でもこの時間待つ」という意味です。ブラウザの処理が重い場合や他のJSの処理が走っている場合は、指定した時間より遅れて実行されることがあります。正確なタイミングが必要な処理には向いていません。
thisが期待通りに動かない
setInterval や setTimeout のコールバック内で this を使う場合、通常の関数式だと this がグローバルオブジェクトを指してしまいます。アロー関数を使うことで外側の this を引き継げます。
// NG：thisがグローバルを指す
setInterval(function() {
console.log(this); // window
}, 1000);
// OK：アロー関数で外側のthisを引き継ぐ
setInterval(() => {
console.log(this); // 外側のthis
}, 1000);まとめ
setTimeout は一定時間後に1回だけ実行・setInterval は一定間隔で繰り返し実行です。どちらも変数に代入して clearTimeout() / clearInterval() で停止できます。setInterval は停止し忘れるとメモリリークにつながるので、使うときは必ず停止の処理もセットで書く習慣をつけておきましょう。
ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。
