JavaScript 速習チュートリアル

JavaScript タイミングイベント

1. タイミングイベント（Timing Events）

タイミングイベントを使用すると、以下のタイミングでコードを実行するように設定できます。

  • 一定の遅延（ディレイ）の後
  • または繰り返し（リピート）

タイミング処理は、システムクロックによって生成されるタイミングイベントによって駆動されます。

2. タイマー関数

JavaScriptで使用される主なタイマー関数は以下の通りです。

関数説明
setTimeout()クロックタイムアウトを設定する（一度だけ実行）
setInterval()クロックインターバルを設定する（繰り返し実行）
clearTimeout()タイムアウト設定をクリア（解除）する
clearInterval()インターバル設定をクリア（解除）する

これらのタイマー関数は window オブジェクトに属しています。
そのため、 setTimeout() は window.setTimeout() と記述するのと同義です。

3. 時計の実装例

以下のコードは、1秒ごとに時刻を更新するシンプルな時計の例です。

<p id="clock"></p>

<script>
// 1000ミリ秒（1秒）ごとにshowTimeを呼び出す
setInterval(showTime, 1000);

// 時刻を表示するための関数
function showTime() {
  const d = new Date();
  document.getElementById("clock").innerHTML =
  d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
</script>

4. setTimeout() メソッド

setTimeout() メソッドは、ミリ秒単位で指定された遅延の後に、関数を一度だけ実行します。

構文:setTimeout(function, delay, p1, ..., pN)

4.1 パラメーター

パラメーター説明
function必須。タイマーが終了したときに呼び出される関数。
delay任意。待機するミリ秒数。デフォルトは0（即時実行）。
p1,...,pN任意。関数に渡される引数。

4.2 戻り値

型説明
Integerタイマーを一意に識別する整数（ID）。この「タイムアウトID」を clearTimeout() に渡すことで、タイマーをキャンセルできます。

4.3 コード例

<button id="btn">スタート</button>

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

<script>
// ボタンにクリックイベントを設定
document.getElementById("btn").addEventListener("click", function () {
  // 2秒（2000ミリ秒）後にshowMsgを呼び出す
  setTimeout(showMsg, 2000);
});

// メッセージを表示する関数
function showMsg() {
  document.getElementById("demo").innerHTML = "2秒経過後に表示されました！";
}
</script>

setTimeout() メソッドは非同期JavaScriptの中核をなす機能であり、メインの実行スレッド（メインスレッド）をブロックすることなく、コードの実行スケジュールを組むことができます。

5. setInterval() メソッド

setInterval() メソッドは、指定された間隔で関数を繰り返し呼び出します。

構文:setInterval(function, delay, p1, ..., pN)

5.1 パラメーター

パラメーター説明
function必須。各インターバルごとに呼び出される関数。
delay任意。各関数呼び出しの間のミリ秒数。デフォルトは0。
p1,...,pN任意。関数に渡される引数。

5.2 戻り値

型説明
Integerタイマーを一意に識別する整数（ID）。 clearInterval() に渡すことで繰り返しを停止できます。

5.3 setInterval() と clearInterval() の併用例

<button id="start">カウンター開始</button>
<button id="stop">停止</button>

<p id="counter">0</p>

<script>
let myInterval;
let count = 0;

const btnStart = document.getElementById("start");
const btnStop = document.getElementById("stop");

// カウント開始ボタン
btnStart.addEventListener("click", function () {
  // 1秒ごとにcounter関数を実行
  myInterval = setInterval(counter, 1000);
});

// カウント停止ボタン
btnStop.addEventListener("click", function () {
  // インターバルをクリアして停止
  clearInterval(myInterval);
});

function counter() {
  count++;
  document.getElementById("counter").innerHTML = count;
}
</script>

6. まとめ

  • setTimeout() メソッドは、遅延の後に関数を一度だけ実行します。
  • setInterval() メソッドは、各インターバル（間隔）ごとに関数を繰り返し実行します。