JavaScript 書いてると、
「○○秒ごとに実行」
みたいなことしたくなること、よくありますよね。

で、そんなときに使うのが setTimeout とか setInterval です。

さらに、その実行の予約をキャンセルするコマンドとして、
それぞれに対応して、clearTimeout と clearInterval というものがあります。

今日は、これに関する小ネタを一つ。

まずは最初に、setTimeout, setInterval のおさらい

setTimeout は一定時間後に一度だけ、指定された処理を、
setInterval は一定時間ごとに、ページを離れたり処理を中断されるまで繰り返すという命令ですね。

setTimeout であれば

setTimeout(実行したい関数, 何ミリ秒後に実行するか);

こんな感じで設定します。
(1ミリ秒は 1 秒の 1000 分の 1)

例えば、

setTimeout(function () {
  console.log(’実行！’);
}, 1000);

こうすれば、1000 ミリ秒、つまり 1 秒後に関数の中身を実行して、
コンソールに 「実行！」と出力するのですね。

setTimeout では 1 度だけ表示されますが、
これを setInterval に置き換えると、1 秒ごとに「実行！」と表示され続けます。

clearTimeout, clearInterval の挙動について

上を読んでいただいて分かるかと思いますが、
setTimeout, setInterval はどちらも「処理を予約する命令」ですね。

その予約を消す方法ももちろんありまして、

var id = setTimeout(function () {
  console.log(’実行！’);
}, 1000);

clearTimeout(id);

こんな感じにすると、どれだけ待っても「実行！」とは表示されません。

setTimeout を設定すると id が払い出されるのですが、
その id を変数に入れておいて、予約が実行される前に clearTimeout の引数に id を渡してあげることで
予約をキャンセルすることができます。

もちろん、setTimeout を解除するための clearTimeout があるということは、
setInterval を解除するための clearInterval もあります。
使い方も、 clearTimeout と同じです。

で、本題。clearTimeout と clearInterval は同じ結果になるらしい

ここまで前置きでしたが、ここから本題。

この clearTimeout と clearInterval 、どちらも同じ処理をしているらしいです。
つまりどういうことか、ですか？

var id = setTimeout(function () {
  console.log(’実行！’);
}, 1000);

clearInterval(id);

こうしても、エラーになるどころか、clearTimeout を使ったときと全く同じように
setTimeout の中の関数はいつまでたっても実行されません。
(エラー云々については、無効な ID を渡してもエラーにはなりませんが)

setInterval に対して clearTimeout を使用した場合も同様に、予約がキャンセルされます。

すなわち、 clearTimeout と clearInterval は入れ替えて使える！ということなんですね。

ちなみに、この類いの話をするときに毎回参考にさせてもらっている MDN の clearTimeout の項
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout
にはこんな記述があります。

注目に値するのは、 setTimeout() 及び setInterval() で使用される ID のプールは共有されますので、つまり技術的には clearTimeout() 及び clearInterval() は互いに交換できます。しかし、明確化のため、そのようなことは避けてください。

なるほど、内部的には setTimeout と setInterval の ID リストは同じものを使用しているので、
どちらもそのリストから ID を削除するという意味で、挙動が同じになるという感じですね。

ということで、これは仕様みたいですね。

でも、リファレンスにもあるように、交換して使う意味は皆無ですし、混乱を招きますから、
実際には使わないようにしてくださいね。