タイマーを使って一定時間後に処理しよう

タイマーは通知の自動非表示、一定間隔の更新、入力後の待機などに利用できます。

今回は、自動的に消える通知と、開始・停止・リセットができる経過時間タイマーを作ります。タイマーIDを保存して解除する理由も確認します。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

タイマー処理を実装する

setTimeoutで一度だけ実行する

const message = document.querySelector('#message');

const timeoutId = setTimeout(() => {
  message.hidden = true;
}, 3000);

時間はミリ秒で指定します。この例は3秒後に一度だけ実行されます。

clearTimeout(timeoutId);

完了前に不要になった場合は解除します。

setIntervalで繰り返す

let seconds = 0;

const intervalId = setInterval(() => {
  seconds += 1;
  console.log(`${seconds}秒経過`);

  if (seconds >= 5) {
    clearInterval(intervalId);
  }
}, 1000);

繰り返し処理には終了条件を用意します。画面から部品を削除した後もタイマーを残すと、不要な処理が続きます。

タイマーを扱うときの注意

実行時刻は厳密ではない

指定時間は最短の待機時間です。ほかの処理や非表示タブの制御によって遅れることがあります。厳密な時刻判定は現在時刻と期限を比較します。

自動的に消える通知を作る

<button id="save-button" type="button">保存する</button>
<p id="message" hidden aria-live="polite"></p>

const saveButton = document.querySelector('#save-button');
const message = document.querySelector('#message');
let messageTimerId;

saveButton.addEventListener('click', () => {
  clearTimeout(messageTimerId);

  message.textContent = '保存しました。';
  message.hidden = false;

  messageTimerId = setTimeout(() => {
    message.hidden = true;
  }, 3000);
});

連続して保存した場合、以前のタイマーを解除してから新しいタイマーを作ります。解除しないと、最後のクリックから3秒経つ前に古いタイマーが通知を消すことがあります。

経過時間タイマーを作る

HTMLを用意する

<p>経過時間：<span id="elapsed-time">0</span>秒</p>
<button id="start-button" type="button">開始</button>
<button id="stop-button" type="button">停止</button>
<button id="reset-button" type="button">リセット</button>

開始と停止を実装する

const elapsedTime = document.querySelector('#elapsed-time');
const startButton = document.querySelector('#start-button');
const stopButton = document.querySelector('#stop-button');
const resetButton = document.querySelector('#reset-button');

let seconds = 0;
let intervalId = null;

function renderTime() {
  elapsedTime.textContent = seconds;
}

startButton.addEventListener('click', () => {
  if (intervalId !== null) {
    return;
  }

  intervalId = setInterval(() => {
    seconds += 1;
    renderTime();
  }, 1000);
});

stopButton.addEventListener('click', () => {
  clearInterval(intervalId);
  intervalId = null;
});

resetButton.addEventListener('click', () => {
  clearInterval(intervalId);
  intervalId = null;
  seconds = 0;
  renderTime();
});

intervalId !== nullの確認がないと、開始ボタンを押すたびに別のタイマーが増え、時間が速く進みます。解除後はnullへ戻し、停止中だと判断できるようにします。

より正確な経過時間を表示する

seconds += 1はタブが非表示になると実時間からずれることがあります。開始時刻と現在時刻の差を計算する方法なら遅延の影響を抑えられます。

const startedAt = Date.now();

const elapsedMilliseconds = Date.now() - startedAt;
const elapsedSeconds = Math.floor(elapsedMilliseconds / 1000);

タイマーは画面更新のきっかけに使い、時間そのものは日時の差から求めます。

まとめ

一度だけならsetTimeout()、繰り返しならsetInterval()を使い、不要になったら解除します。次の記事ではスクロールと画面サイズの変化を扱います。