setIntervalとsetTimeoutの違いを完全解説｜中学生にもわかる使い分けのコツと実例

---

「setInterval」と「setTimeout」の基本を押さえよう

Web開発では時間を管理するための「待機機能」がよく使われます。代表的なのが setTimeout と setInterval です。
この二つには根本的な違いがあり、使い分け方を間違うと意図しない挙動になることもあります。
まず覚えるべき点は、両者とも「遅延を与える」機能を持つ点ですが、setTimeout は「1回だけ遅延させて実行」、setInterval は「一定間隔で繰り返し実行」する点が大きく異なります。
この基本を押さえれば、あとは実際のコードでどう使うかを決めるだけです。
さらに、両者は「タイマーID」を返します。返ってくる値が違うわけではなく、環境によって表現が異なることはあるものの、どちらも後で停止させるための関数 clearTimeout と clearInterval を使います。
注意点として、ブラウザのタブがバックグラウンドになるとタイマーが正確に動作しなくなることがあり、遅延の精度が落ちたり、間隔がずれたりします。このことも実務では知っておくと役に立ちます。
次の節では、具体的な例と、どんな場面で使い分けるべきかを詳しく解説します。

使い分けのコツと実践例

以下では、使い分けの基本ルールと、実際のコード例を交えた解説をお届けします。
まず大切なのは「何をしたいのか」を明確にすることです。
1回だけ遅延させたい場合は setTimeout、定期的に更新したい場合は setInterval です。
ただし、実は「正確な頻度」を求めるときには setTimeout を使って自分で繰り返しを実現する方法が有効です。以下に代表的な使い分けパターンを示します。
パターンA: 単発遅延 → setTimeout を使う。
パターンB: 正確な間隔更新を目指す場合の注意点 → setInterval を使うが、コールバックの処理が重いと間隔が崩れることを前提にする。
パターンC: ドリフトを抑える方法 → setTimeout を再度呼ぶ形で実装する。

able> 項目setTimeoutsetInterval 用途1回だけの遅延実行一定間隔で繰り返し実行 返り値TimeoutIDIntervalID 解除方法clearTimeout(id)clearInterval(id) 代表的な注意点実行時間が長いと遅延に影響コールバックが長いと間隔がずれる可能性 ble>

実務で使うときのコツは、「ドリフト（時間のずれ）」をどう扱うかを前提に設計することです。
例えば、時計のように正確な更新が必要なら setTimeout を自分でループさせる実装を選ぶと良いでしょう。
また、React や Vue などのフレームワークを使う場合は、コンポーネントのマウント・アンマウント時にタイマーを必ずクリアすることが重要です。
この基本ルールを守れば、時間を扱う場面でのエラーを大きく減らせます。

ピックアップ解説

koneta: ねえ、setTimeoutとsetIntervalの違いって何度も混乱するよね。実際には、setTimeoutは『今からこの遅延後に1回だけ実行する』、setIntervalは『一定間隔で繰り返し実行する』、という点が基本。ただ、実務では「正確な頻度」を求めるときには setTimeout を使って自分で繰り返しを実現する方法が有効です。私はドリフトを避けるため、正確さより安定を優先する時はsetTimeoutを自分でループさせる実装を選ぶことが多い。例えば、1秒ごとに更新したい場合、setTimeoutで毎回自分で次のsetTimeoutを呼ぶ実装にして、前回の処理時間を考慮して遅れを補正する。これなら、ブラウザがスリープしていた時間を挟んでも、再開時のズレを少なくできる。

---