JavaScriptで一定時間経過後に処理を実行させる方法

はじめに

目次

〇秒経過後に処理を実行させる方法

JavaScriptで「一定時間経過後に処理を実行する」場合はsetTimeout()メソッドを使用します。

setTimeout()メソッド

setTimeout(処理内容,時間)1番目の引数で処理内容を記述
2番目の引数で処理を実行する経過時間を記述(単位:ミリ秒)

例えば、以下の例だと「ここのテキストが変わります」と書かれたテキストが、5秒経過後に「5秒経過しました」に書き替わります。

HTML

  1. <span id="test01">ここのテキストが変わります</span>

JavaScript

  1. <script>
  2. window.setTimeout( function() {
  3. document.getElementById('test01').textContent = '5秒経過しました';
  4. }, 5000);
  5. </script>

CSSは割愛しています

できあがったもの

このページを読み込んで5秒経過後、下のボックス内にテキストが「5秒経過しました」に変化します。

ページを読み込んで」5秒後に処理が始まるので、読み込みに時間のかかるページだと実際にはもう少し時間がかかっているように感じます。

既に変化していたらブラウザをリロードしてご確認下さい。

ここのテキストが変わります

これではページが読み込まれるとすぐ時間の計測が開始されてしまうので、「ボタンを押して5秒後に処理を開始する」に変更してみたいと思います。

ボタンを押して〇秒経過後に処理を実行させる方法

ボタンを押して5秒後に処理を開始」させたい場合はaddEventListenerを併用して、「ボタンをクリックしたらイベントが開始される」ように追記します。

HTML

  1. <div>
  2. <input type="button" id="btn02" class="p-button" value="開始">
  3. </div>
  4. <div>
  5. <span id="test02">ここのテキストが変わります</span>
  6. </div>

JavaScript

  1. <script>
  2. document.getElementById('btn02').addEventListener('click', function() {
  3. window.setTimeout( function() {
  4. document.getElementById('test02').textContent = "5秒経過しました";
  5. }, 5000);
  6. });
  7. </script>

CSSは割愛しています

できあがったもの

ここのテキストが変わります

このようにaddEventListenerを使えば、クリック以外でも色々なイベントをきっかけとして処理を実行できます。

おまけ

setTimeoutを2回記述すれば、2段階で処理を実行できます。

JavaScript

  1. document.getElementById('btn03').addEventListener('click', function() {
  2. window.setTimeout( function() {
  3. document.getElementById('test03').textContent = "5秒経過しました";
  4. }, 5000);
  5. window.setTimeout( function() {
  6. document.getElementById('test03').textContent = "10秒経過しました";
  7. }, 10000);
  8. });
ここのテキストが変わります