【JavaScript】setTimeoutとは何か？使い方を実例で解説（待機や遅延）

Webページをよりインタラクティブで魅力的にしたいと思ったことはありませんか？ボタンを押したらメッセージが表示されたり、アニメーションが滑らかに再生されたり、非同期処理の完了を待ってから次の処理を実行したり…。そんなを実現したいあなたにとって、setTimeoutは必須の知識です。

setTimeoutは、JavaScriptで指定した時間後に任意の処理を実行する関数です。この機能を活用することで、Webページに様々な動的な機能を追加することができます。

しかし、setTimeoutの仕組みや使い方は意外と複雑で、初心者にとってはハードルが高いと感じるかもしれません。

そこで今回は、setTimeoutの仕組みから基本的な使い方、そして具体的な応用例までを、丁寧に解説します。コード例も紹介しているので、実際に試しながら理解を深めることができます。

setTimeoutをマスターすることで、あなたのWebページ開発スキルは大きく向上します。この記事を読み終える頃には、setTimeoutを自在に操り、思い通りのWebページを作れるようになっているでしょう。

setTimeoutとは何か？

setTimeoutは、指定した時間後に任意の処理を実行する関数です。いわるゆ「待機」や「遅延」をしてくれます。

Webページに動的な機能を追加したい場合に非常に役立ちます。

setTimeoutの使い方

setTimeoutの基本構文は次のようになっています。

setTimeout(処理, 遅延時間)
setTimeout(処理, 遅延時間, 引数)
setTimeout(処理, 遅延時間, 引数1, 引数2,,,,,,,)

指定するのは、何ミリ秒遅延させるか？という時間と、実行する関数です。

関数に引数を渡したい場合は、ミリ秒の後ろにカンマで区切って引数を記述します。

実際に使うときはアロー関数で指定することが一般的です。

setTimeout(() => {
  処理;
}, ミリ秒);

setTimeoutの主な用途

setTimeoutは以下のような場面で使われます。

（CSSの遅延処理はtransitionやanimationでも実装することができます）

実例1: 1.2秒後にコンソールに文字列を表示する

setTimeoutの簡単な例として、1.2秒後にコンソールに文字列を表示させることができます。

setTimeout(() => {
  console.log('こんにちは！');
}, 1200);

実例2: ボタンクリック後1.3秒後に色を変える

setTimeoutを使えば、ボタンをクリックして指定時間後に色を変えるといった処理を実行することもできます。

  <button id="myButton">ボタン（setTimeout）</button>
  <script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', () => {
      setTimeout(() => {
        button.style.backgroundColor = 'red';
        button.style.color = 'white';
      }, 1300);
      console.log('ボタンがクリックされました！1.3秒後に色が変わります');
    });
  </script>

実例3: ローディング画面の実装

WEBサイトをロードしたときに最初に表示するローディング画面を実装するときもsetTimeoutを使います。

例えば、画面ロード後3秒後に、0.4秒かけて要素を非表示にしていく処理は以下のようになります。

document.addEventListener('DOMContentLoaded', () => {
  
  // ローダー終了
  function end_loader() {
    const loader = document.getElementById('my-custom-loader-wrapper');
    loader.style.transition = 'opacity 0.4s';
    loader.style.opacity = '0';
    setTimeout(() => {
      loader.style.display = 'none';
    }, 400);
  }

  // タイマー処理
  window.addEventListener('load', () => {
    setTimeout(() => {
      end_loader();
    }, 3000);
  });
  
});