【JS】setTimeout()とsetInterval()の違い（一回と複数回）

ネイティブJSいろいろやってみたシリーズの続きです。以前、setTimeout()を使って令和カウントダウンタイマーという記事を作りました。これと良く似たメソッドでsetInterval()があるので、2つの違いを体験したく、記事にしました。それでは行きましょう！

【目次】

setTimeout()とsetInterval()の書式はほぼ同じ
処理全体をメソッドで囲う
- setTimeout()
- setInterval()
外部に書いた関数を読み込む
- setTimeout()
- setInterval()
関数の中にメソッドを書く
- setTimeout()
- setInterval()
最後に

※参考：【JS】DateとsetTimeout()で作るカウントダウンタイマー（令和まであと何日？） - クモのようにコツコツと

ネイティブJSいろいろやってみたシリーズ
qiita.com

setTimeout()とsetInterval()の書式はほぼ同じ

時間差で処理を実行するsetTimeout()とsetInterval()。「タイマー処理」と言われる。二つの書式はほとんど同じ。

// 一定時間の後に1回処理を実行
setTimeout(処理, 時間);

// 一定時間ごとに複数回処理を実行
setInterval(処理, 時間);

どちらも第一引数に処理内容、第二引数に時間を書く。

違いは処理の実行回数

setTimeout()は第二引数の時間が経った後に1回処理を実行する
setInterval()は第二引数の時間ごとに複数回処理を実行する

以前作った令和カウントダウンタイマーはsetTimeout()で書いている。

See the Pen reiwa countdown5 by イイダリョウ (@i_ryo) on CodePen.

1秒ごとにカウントが動く。（もはやカウントダウンがマイナスまで行ってしまっているがw）

※参考：【JS】DateとsetTimeout()で作るカウントダウンタイマー（令和まであと何日？） - クモのようにコツコツと

本来setTimeout()は1回しか処理実行されないはずなのに何故カウントをし続けているのか？

setTimeout()やsetInterval()は書き方によって挙動が変わる。いくつかの書き方を試してみる。

処理全体をメソッドで囲う

まず処理全体をメソッドで囲ってみる。

setTimeout()

最初にsetTimeout()の例

See the Pen setTimeout-1 by イイダリョウ (@i_ryo) on CodePen.

「Run pen」を押すと画面上の「羊は0匹…」の文字が1秒後に「羊は1匹…」になる。しかしそれ以上は数えない。

HTMLはシンプル

HTMLコード

<section>
    <h1>羊は何匹？</h1>
    <p class="timer">「羊が0匹…」</p>
</section>

. timerのpタグの中に初期は「羊が0匹…」と書いている。ここをJSで変更する。

JSコード

const timer = document.querySelector('.timer');

let counter = 0;

setTimeout(() => {
    if(counter < 100){
            counter++;
         }
    timer.innerHTML = '「羊が' + counter + '匹…」';
}, 1000);

変数timerで. timerのDOMを取得
変数counterに初期値0を入れる
setTimeout()の第一引数は無名関数
無名関数の中：もしcounterが100より少なければ
counterの値を1追加せよ
timerの中身をinnerHTMLで「羊が（カウント数）匹…」にする
setTimeout()の第二引数は1000ミリ秒（＝1秒）

if文で最大100までカウントする条件にしているものの、setTimeout()は1回しか実行されないため、1秒後に「一匹」になるのみ。

setInterval()

上記のコードをsetInterval()にしてみる。

See the Pen setInterval-1 by イイダリョウ (@i_ryo) on CodePen.

「Run pen」を押すと、今度は羊を数え続けている。

JSコード

const timer = document.querySelector('.timer');

let counter = 0;

setInterval(() => {
    if(counter < 100){
            counter++;
         }
    timer.innerHTML = '「羊が' + counter + '匹…」';
}, 1000);

setTimeout()をsetInterval()に変えただけ。

これによって100匹まで羊を数え続ける！

外部に書いた関数を読み込む

処理全体をメソッドで囲う方法だと処理が増えた時に見通しが悪くなる。処理を外部の関数に書いて、読み込んでみる。

setTimeout()

まずsetTimeout()の例

See the Pen setTimeout-2 by イイダリョウ (@i_ryo) on CodePen.

動きは変わらない。羊を一匹しか数えない。

JSコード

const timer = document.querySelector('.timer');

let counter = 0;

const hitsuji = () => {
    if(counter < 100){
            counter++;
         }
    timer.innerHTML = '「羊が' + counter + '匹…」';
}

setTimeout(hitsuji, 1000);

変数hitsujiの中に無名関数で処理を書く
setTimeout()の第一引数で関数hitsujiを読み込む

setTimeout()の見通しは良くなった。第一引数の関数名に括弧がないのはaddEventListener()などと一緒で、関数を即座に実行させないため。

第1引数にイベントタイプ、第2引数に実行される関数（コールバック関数）を指定しています。
上記例ではloadイベントが検知されると同時にコールバック関数が実行されるので、funcに()はつけません。
もし第2引数をfunc()のように括弧をつけて書いてしまうと、JavaScriptが読み込まれた時点でfunc関数が実行されてしまいます。
（loadよりも早いタイミングで関数が実行される。）

※参考：JavaScriptのイベント指定〜括弧()をつける？つけない？〜 - Qiita

setInterval()

次に、setInterval()もやってみる。

See the Pen setInterval-2 by イイダリョウ (@i_ryo) on CodePen.

こちらも挙動は変わらない！

JSコード

const timer = document.querySelector('.timer');

let counter = 0;

const hitsuji = () => {
    if(counter < 100){
        counter++;
    }
    timer.innerHTML = '「羊が' + counter + '匹…」';
}

setInterval(hitsuji, 1000);

最後の行のsetTimeout()をsetInterval()にしたのみ。

関数の中にメソッドを書く

次は関数の中にメソッドを書く。少し特殊な書き方になる。（最初の令和カウンターはこの方法を使っている）

setTimeout()

まずsetTimeout()から。

See the Pen setTimeout-3 by イイダリョウ (@i_ryo) on CodePen.

「Run Pen」を押すと、なんと！setInterval()のように繰り返し羊を数え始めた！

const timer = document.querySelector('.timer');

let counter = 0;

const hitsuji = () => {
    if(counter < 100){
        counter++;
    }
    timer.innerHTML = '「羊が' + counter + '匹…」';
    setTimeout(hitsuji, 1000);
}

hitsuji();

変数hitsujiの無名関数の中にsetTimeout()を書く
setTimeout()の第一引数に関数自身hitsujiを書く
関数hitsuji()を実行

関数hitsuji()を定義する処理の中にsetTimeout()を書くが、その第一引数の中に自分自身であるhitsujiを書いているのが特殊。

setInterval()

では、これをsetInterval()にしたらどうなるのか？

See the Pen setInterval-3 by イイダリョウ (@i_ryo) on CodePen.

おお、「1匹」「2匹」「4匹」「8匹」「16匹」…とバイバインのように倍数で増え続ける。あっという間に100匹になった！

JSコード

const timer = document.querySelector('.timer');

let counter = 0;

const hitsuji = () => {
    if(counter < 100){
        counter++;
    }
    timer.innerHTML = '「羊が' + counter + '匹…」';
    setInterval(hitsuji, 1000);
}

hitsuji();