【JavaScript】setIntervalを停止させたり再開させる方法・コード例

JavaScriptのsetInterval関数において…

  • 途中で処理を停止させたい、
  • 処理の停止・再開を切り替えたい

こういった方法は工夫すれば簡単にできます。

ということで何か役に立つかもしれないので、
JavaScriptのsetInterval()の停止・再開を解説!!

setIntervalを停止させる方法は簡単!

まずは停止だけさせる方法について

それは clearInterval()  を使えばいいだけです。

▼ MDNでの setInterval()  の説明

setInterval() メソッドは Window および Worker メソッドで提供され、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。このメソッド、インターバルを一意に識別するインターバル ID を返します。よって clearInterval() を呼び出して、後でインターバルを削除できます。

引用元 : https://developer.mozilla.org/ja/docs/Web/API/setInterval

この説明にある通り、 setInterval()  は実行したら実行しっぱなしではなくインターバルIDなるものを返してくれます。これを clearInterval()  に渡すとタイマーを止められるわけです。

以下に簡単なコード例を示します

▼ すごく簡単なコード例

▼ このコードでやっていること

  • 処理を100ミリ秒間隔で呼び出し
  • 100回を越えたら定期実行停止

ちなみに setIntervalで実行する処理が実行間隔(ここでは100ミリ秒)より長い場合、次の実行は現在の実行が終わるのを待たずに実行されるようです。

setIntervalを任意で停止・再開させるやり方

これは工夫するしかないです。

だって再開させる関数は用意されてないから

例えば次の条件でやりたいとしましょう。

  • 100ミリ秒間隔でなにか処理をしたい
  • 停止ボタンを押したら処理を一時停止
  • 最下位ボタンを押したら処理を再開

面倒だけど一工夫すればできます。次のように

▼ 停止・再開ボタンのHTML

▼ setIntervalの実行コード例

一応できるんですが・・・

こんなコードを書くことなんて滅多にないと思います。

ありえるならRest APIを定期的に呼び出し、そのレスポンスを受け取って表示を変えたりとかですかね。ブラウザのリソースを食いつくすコードでも平気で書けるのがJavaScriptのすごい所でもあります。

ちなみにsetIntervalはnode.jsでも使える普遍的な関数

最後に蛇足というか豆知識

node.jsはサーバー側で動くフレームワークです。

▼ node.jsでサーバー構築&起動する基本手順まとめ

でも次のようなブラウザで動く機能は使えません。

  • fetchとか通信系関数
  • DOM操作系の関数
  • そもそもwindowも参照できない

これがブラウザで動くJavaScriptに慣れてる人がnode.jsを始める時に困惑するポイントです。node.jsとブラウザで動くJSは別物と考えるべき

ところが次の4つはサポートされてます。

  • setTimeout
  • setInterval
  • clearInterval
  • setImmediate

ブラウザでは window  がグローバルオブジェクトであり、それに setTimeout()  とか setInterval()  が定義されています。Node.jsでのグローバルオブジェクトは global  となってます。

これがNode.jsでも使えるのは便利です

停止させるのは簡単だが再開は工夫が必要

  • 停止は clearInterval にタイマーIDを渡すだけです。
  • でも再開となると一筋縄ではいきません。
  • この記事よりいいアイデアがあれば教えてください。
  • 以上、JSでのタイマー停止・再開でした。ではまた

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください