【JavaScript】 「setInterval」「setTimeout」のちがいを解説

という方向けのご紹介です。

執筆者

・独学でキルミーベイベーのゲームを作っている男
・javascriptが大好きな男

setTimeoutとsetInterval

『何秒ごとに』『何秒経過したら』という処理を予約したいことがあると思います。
そんな時に使えるのがこの2つのメソッド

構文自体はほとんど同じですが、使うタイミングもあわせて紹介致します。
順番に見ていきましょう。

setTimeoutとclearTimeout

まずは一回だけ処理するメソッドの基本構文から

これで『時間が経過したら起動したい関数を発動する』という処理になります。

続いてこれを取消する場合なのですが、

// タイマー識別子
let timerId = setTimeout(………)

同じ構文なので分かりやすいですね。

時間ごとの処理は便利なのですが一点だけ注意事項がございます。

setIntervalを使う時の注意

時間ごとに処理をする都合上、基本的に無限に処理を続けるという欠点があります。

clearIntervalで処理を止めない限り続けるので、ブラウザが重くなったりする原因になりますので、気を付けましょう。

もし、「止めた後にもう一回setIntervalを開始したいなぁ」というはこちらをご確認ください。
【JavaScript】途中で停止、再開を自由に設定する方法【setInterval】

「途中で停止させて再開させる」専用のメソッドはありませんが、できるだけ簡単に再現できるサンプルコードを載せております。

是非ご活用ください。

まとめ

最後に、setinterval周りのパターンをまとめておきます。