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 を削除するという意味で、挙動が同じになるという感じですね。
ということで、これは仕様みたいですね。
でも、リファレンスにもあるように、交換して使う意味は皆無ですし、混乱を招きますから、
実際には使わないようにしてくださいね。
