clearIntervalがうまくいかない時の対処法

Javascriptで一定周期ごとに〇〇したいという時は、タイマーを使うことがあると思います。

setIntervalしたものを停止したいときはclearIntervalを用いますが、うまくいかないときがありましたのでその時の対処法です。

■事象

「開始」buttonをクリックしたときに、setIntervalでタイマーを起動。

「停止」buttonをクリックしたときに、タイマーの停止。

を行いたくコードを書いていました。

タイマーの変数が配列になって増えていくようでうまくタイマーが停止できなかった。

var timer;
on.onclick = function() {
    timer = setInterval(function, 500);
};
off.onclick = function() {
    clearInterval(timer);
}; 

■対処法

setIntervalを行う前にclearIntervalを必ず行う。

こうすることでタイマーの変数が配列にならず、ちゃんと停止することができました。

var timer;
on.onclick = function() {
    if(timer) {
        clearInterval(timer);
    }
    timer = setInterval(function, 500);
};
off.onclick = function() {
    clearInterval(timer);
}; 

以上。