JavaScript/setTimeout

setTimeout()は、JavaScriptにおいて、指定した時間（ミリ秒単位）が経過した後に、関数または指定されたコードを実行するためのメソッドです。タイマー機能を実現するために広く使用され、非同期処理において重要な役割を果たします。

概要

setTimeout()はglobalThisオブジェクトのメソッドですが、グローバルスコープで直接使用できます。

構文

const timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...);

• func|code: 実行する関数またはコードの文字列。関数を指定することが推奨されます。
• delay: 遅延時間（ミリ秒単位）。省略可能で、デフォルトは0です。
• arg1, arg2, ...: 関数に渡す引数（省略可能）。

戻り値

setTimeout()はタイマーIDを返します。このIDは、後でclearTimeout()を使用してタイマーをキャンセルするために使用できます。

解説

setTimeout()は非同期的に動作します。つまり、setTimeout()の呼び出し後、すぐに後続のコードが実行され、指定された遅延時間が経過した後に、setTimeout()に渡された関数またはコードが実行されます。

例1

関数を実行

function greet(name) {
  console.log("Hello, " + name + "!");
}

const timerId = setTimeout(greet, 2000, "Taro"); // 2秒後にgreet("Taro")を実行

console.log("このメッセージはsetTimeoutより先に表示されます");

このコードでは、「このメッセージはsetTimeoutより先に表示されます」が先にコンソールに出力され、その後2秒後に「Hello, Taro!」が出力されます。

例2

コード文字列を実行 (非推奨)

setTimeout("console.log('これはコード文字列で実行されます');", 3000); // 3秒後に実行

コード文字列の実行はeval()と同様にセキュリティ上のリスクがあるため、関数を使用することを強く推奨します。

例3

遅延時間0

遅延時間を0に設定した場合、setTimeout()はコールバック関数をイベントループの最後に配置します。これは、現在のスクリプトの実行が完了した後、コールバック関数が実行されることを意味します。

setTimeout(() => {
  console.log("これは遅延時間0で実行されます");
}, 0);

console.log("これはsetTimeoutより先に表示されます");

この場合でも、「これはsetTimeoutより先に表示されます」が先に出力されます。

タイマーのキャンセル (clearTimeout())

setTimeout()で設定したタイマーは、clearTimeout()を使用してキャンセルできます。

構文

clearTimeout(timerId);

例

const timerId = setTimeout(greet, 2000, "Jiro");

clearTimeout(timerId); // タイマーをキャンセル

console.log("タイマーはキャンセルされました");

このコードでは、greet("Jiro")は実行されません。

まとめ

setTimeout()はJavaScriptで時間ベースの処理を行うための基本的なツールです。非同期処理の理解と組み合わせて使用することで、様々な表現力豊かなWebアプリケーションを開発することができます。特にアニメーション、遅延ロード、ポーリングなどの実装に役立ちます。

関連項目

• setInterval(): 一定間隔で繰り返し関数を実行します。
• clearTimeout(): setTimeout()で設定したタイマーをキャンセルします。
• clearInterval(): setInterval()で設定したタイマーをキャンセルします。
• イベントループ: JavaScriptの非同期処理の仕組み。