【JavaScript・小ネタ】clearTimeout と clearInterval は同じ結果になるらしい

  • 2019/6/10
  • 【JavaScript・小ネタ】clearTimeout と clearInterval は同じ結果になるらしい はコメントを受け付けていません。

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 を削除するという意味で、挙動が同じになるという感じですね。

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

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

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-6-24

    【JavaScript】オブジェクトより便利かも!? Map を使ってみよう!

    今回は JS ではあまり使われていない、Map のご紹介 JavaScript で連想配列のような…
  2. 2019-6-23

    第5回アウトドア部 ~なんかすごく暑い~

    2019/5/25(土)、アウトドア部の5回目の活動!! 今回はBBQです! いざ会場へ! い…
  3. 2019-6-17

    JavaScript での変数定義は var を捨てて let, const を使うべき理由

    JS の変数定義では let, const を使うべし!…って何で? JavaScript は最近…
  4. 2019-6-14

    2019年5月度社員総会&懇親会@Nagoya

    2019年5月8日(水)、名古屋社員総会&懇親会が開催されました! 今回はその様子をわたくし、おーて…
  5. 2019-6-10

    【JavaScript・小ネタ】clearTimeout と clearInterval は同じ結果になるらしい

    JavaScript 書いてると、 「○○秒ごとに実行」 みたいなことしたくなること、よくありますよ…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式®」(登録6150741)は、日本国内における株式会社エージェントグローの登録商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。