JavaScript: タイマーの多重起動を防止する方法

タイマーは使用頻度の高い機能ですが、コーディング方法によってはタイマーが多重起動してしまい、 思わぬ動作をする場合があります。

まず、多重起動するとどうなるかを説明して、次にタイマーの多重起動を防止する方法を２つ紹介します。

タイマーが多重起動するとどうなる？

同じsetInterval(タイマーID)からタイマーが２重起動したとします。

timerA (先に起動)
timerB (次に起動)

この状態でclearInterval(タイマーID)を実行しても、 止まるのは最後に起動したtimerBだけです。 先に起動したtimerAはそのまま動き続けます。

３重でも４重でも同じように最後のタイマーだけが止まり、 先に起動したタイマーは動き続けます。

では次に多重起動を防止する方法を紹介します。

1. clearInterval()を入れる

一番シンプルな方法として、setInterval()の前にclearInterval()を記述します。


clearInterval(timerID);
timerID = setInterval(func, 1000);

こうすることでタイマーが起動していた場合は先にクリアされますから、多重起動しません。 その代わり、タイマーがリセットされて新たに起動することになります。

2. タイマーをスタートさせる要素を無効化する

ボタンを使ってタイマーをスタートさせる場合等に、適用できる方法です。
一度ボタンを押した後に、無効化することでタイマーの多重起動を防止します。 「disabled」属性を変更することで無効・有効を切り替えます。

コードでは次のように記述します。


// ボタンを無効
btn.disabled = true;

// ボタンを有効
btn.disabled = false;
JavaScript入門