現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

タイマー

【JavaScript入門】setTimeoutとclearTimeoutの使い方|指定時間後に処理を実行するタイマーの基本

投稿日:2019年7月2日 更新日:

JavaScriptのsetTimeout・clearTimeoutとは?指定時間後に処理を実行するタイマーの使い方

setTimeout() は、指定した時間が経過した後に一度だけ処理を実行するためのメソッドです。
また、clearTimeout() を使うことで、設定したタイマーを解除できます。

時間はミリ秒(1秒=1000ミリ秒)で指定します。



setTimeoutメソッドとは?

setTimeout() は、指定した時間が経過した後に関数を1回だけ実行します。

書式:

タイマーID = setTimeout(実行する関数, 指定時間ミリ秒);

使用例:3秒後に関数を実行

timer1 = setTimeout(“msg()”, 3000);

→ 3秒後に msg() が1回だけ実行されます。



clearTimeoutメソッドとは?

clearTimeout() は、setTimeout() で設定したタイマーを解除するメソッドです。

タイマーを解除するには、setTimeout() の戻り値(タイマーID)を変数に保存しておく必要があります。

使用例:設定したタイマーを解除

clearTimeout(timer1);

timer1 に設定されたタイマーが実行されなくなります。

実際のサンプル:ボタンでタイマー開始・停止

<script>
let timer;

function startTimer() {
  timer = setTimeout(() => alert(‘3秒経過しました’), 3000);
}

function stopTimer() {
  clearTimeout(timer);
  alert(‘タイマーを解除しました’);
}
</script>

<button onclick=”startTimer()”>タイマー開始</button>
<button onclick=”stopTimer()”>タイマー停止</button>

→ タイマーの仕組みが直感的に理解できます。



setTimeoutとclearTimeoutのポイント

  • setTimeout() は指定時間後に1回だけ実行
  • 繰り返し処理したい場合は setInterval() を使用
  • clearTimeout() でタイマーを解除可能
  • タイマーIDを変数に保存しておく必要がある

関連リンク

-タイマー
-

執筆者: