JavaScript アドバンス

JavaScript Timing Events

1. タイミングイベント (Timing Events)

JavaScriptは、一定の時間間隔でコードを実行することができます。これをタイミングイベント (Timing Events)と呼びます。

window オブジェクトを使用すると、指定した時間間隔でコードを実行することが可能になります。JavaScriptで利用する主要なメソッドは以下の2つです。

  • setTimeout(function, milliseconds) 指定されたミリ秒数待機した後、関数を1回だけ実行します。
  • setInterval(function, milliseconds) setTimeout() と同様ですが、関数を継続的に（指定された間隔で）繰り返します。

これら setTimeout() と setInterval() は、いずれも HTML DOM Window オブジェクトのメソッドです。

2. setTimeout() メソッド

window.setTimeout(function, milliseconds);

window.setTimeout() メソッドは、window プレフィックスを省略して記述することも可能です。

  • 第1パラメータ： 実行する関数。
  • 第2パラメータ： 実行までの待機時間をミリ秒（ms）単位で指定。

2.1 実装コードの例

ボタンをクリックすると、3秒待機した後にページに「Hello」とアラートを表示します。

<button onclick="setTimeout(myFunction, 3000)">試してみる</button>

<script>
function myFunction() {
  alert('こんにちは（Hello）');
}
</script>

3. 実行を停止する方法 (clearTimeout)

clearTimeout() メソッドは、setTimeout() で指定された関数の実行をキャンセル（停止）します。

window.clearTimeout(timeoutVariable);

このメソッドも window プレフィックスなしで記述可能です。clearTimeout() を使用するには、setTimeout() を呼び出した際に返される変数を使用します。

// setTimeoutの戻り値を保持
myVar = setTimeout(function, milliseconds);
// 実行前に停止
clearTimeout(myVar);

関数がまだ実行されていない場合、clearTimeout() を呼び出すことでその実行を止めることができます。

3.1 実装コードの例

先ほどの例に、実行を止めるための「停止」ボタンを追加した例です。

<button onclick="myVar = setTimeout(myFunction, 3000)">試してみる</button>

<button onclick="clearTimeout(myVar)">停止する</button>

<script>
function myFunction() {
  alert('こんにちは');
}
</script>

4. setInterval() メソッド

setInterval() メソッドは、指定された時間間隔（インターバル）ごとに、特定の関数を繰り返し実行します。

window.setInterval(function, milliseconds);
  • 第1パラメータ： 実行する関数。
  • 第2パラメータ： 各実行の間の時間間隔をミリ秒単位で指定。

以下の例では、myTimer という関数を1秒ごとに実行します（デジタル時計のような動作）。

4.1 実装コードの例

現在の時刻を表示し続ける例です。

// 1000ミリ秒（1秒）ごとにmyTimerを実行
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

5. 実行を停止する方法 (clearInterval)

clearInterval() メソッドは、setInterval() メソッドによって設定された繰り返しの実行を停止します。

window.clearInterval(timerVariable)

clearInterval() を使用する際は、setInterval() から返された変数を利用します。

let myVar = setInterval(function, milliseconds);
// インターバルを解除
clearInterval(myVar);

5.1 実装コードの例

時刻の更新を停止するボタンを配置した例です。

<p id="demo"></p>

<button onclick="clearInterval(myVar)">時間を止める</button>

<script>
// setIntervalのIDを変数myVarに格納
let myVar = setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>