JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのsetInterval関数の使い方を徹底解説！定期的な処理を実行する方法

JavaScriptの setInterval() メソッドは、指定した間隔で同じ処理（式や関数）を繰り返し実行したいときに使う便利な関数です。タイマー表示、アニメーション、定期チェックなど、さまざまな場面で活用されています。

setInterval() の基本構文

setInterval(function, interval_in_milliseconds, param1, param2, param3...)

各引数の意味は以下のとおりです。

  • function：繰り返し実行したい関数または処理
  • interval_in_milliseconds：処理を実行する間隔（ミリ秒単位）。例えば「500」を指定すると0.5秒ごとに実行されます
  • param1, param2...：関数に渡す任意の引数（省略可能）

setInterval() の使用例

次のコードは、0.5秒（500ミリ秒）ごとに現在時刻を取得して画面に表示するシンプルなデジタル時計の例です。実際にブラウザで動かしてみると、時刻がリアルタイムに更新される様子を確認できます。

<!DOCTYPE html>
<html>
   <body>
      <p id="test"></p>
      <script>
         var myVar = setInterval(function(){ displayTimer() }, 500);
         function displayTimer() {
            var date = new Date();
            var time = date.toLocaleTimeString();
            document.getElementById("test").innerHTML = "Time: "+time;
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、setInterval() を使って displayTimer() 関数を500ミリ秒ごとに呼び出しています。displayTimer() 内では new Date() で現在の日時を取得し、toLocaleTimeString() で読みやすい時刻形式に変換した後、innerHTML を使って <p> 要素に表示しています。

タイマーを停止するには clearInterval() を使う

setInterval() で開始した繰り返し処理は、放置すると永遠に続きます。処理を止めたい場合は、戻り値として返されるIDを使って clearInterval() を呼び出します。

var myVar = setInterval(displayTimer, 500);
// タイマーを停止したいとき
clearInterval(myVar);

ボタン操作でタイマーを開始・停止できるようにすると、より実用的なアプリケーションになります。

まとめ

setInterval() は一定間隔で処理を繰り返すための基本的なタイマーAPIです。引数には「実行する関数」と「間隔（ミリ秒）」を指定し、必要に応じて関数へ引数を渡すこともできます。停止する際は clearInterval() を忘れずに使うことで、不要な処理の継続を防げます。

  1. クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

    JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ