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

JavaScriptのsetInterval()メソッドとは？使い方とコード例をわかりやすく解説

setInterval()メソッドとは

setInterval()は、JavaScriptが提供するタイミングイベントの一つです。windowオブジェクトのメソッドとして用意されており、指定した時間間隔ごとにコード（関数）を繰り返し実行することができます。

このメソッドには主に2つの引数を渡します。1つ目は繰り返し実行したい関数、2つ目はその関数を実行する間隔を示す時間（ミリ秒）です。

構文

window.setInterval(function, milliseconds, param1, param2, ...);

第3引数以降に任意のパラメータを指定することも可能で、これらの値は実行される関数へ引き渡されます。

使用例1：3秒ごとに関数を繰り返す

次の例では、setInterval()メソッドを使い、3000ミリ秒（3秒）の間隔を設定しています。そのため、関数内の処理が3秒ごとに繰り返し実行されます。9秒間実行した場合の出力結果は以下の通りです。

<html>
<body>
<script>
   setInterval(function(){
      document.write("Tutorix </br>");
   }, 3000);
</script>
</body>
</html>

出力結果

Tutorix
Tutorix
Tutorix

使用例2：2秒ごとに関数を繰り返す

次の例では、setInterval()メソッドに対して2000ミリ秒（2秒）の間隔を設定しています。この場合も同様に、関数内の処理が2秒ごとに繰り返し実行されます。出力結果は以下の通りです。

<html>
<body>
<script>
   setInterval(function(){
      document.write("Hello </br>");
   }, 2000);
</script>
</body>
</html>

出力結果

Hello
Hello

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

なお、setInterval()で開始した繰り返し処理は、明示的に停止しない限り無期限に続きます。処理を止めたい場合は、戻り値として得られるIDをclearInterval()に渡すことでタイマーを解除できます。

const timerId = setInterval(function(){
   console.log("繰り返し実行中");
}, 1000);

// タイマーを停止したいタイミングで呼び出す
clearInterval(timerId);
  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2