JavaScriptで指定時間後に関数を実行する方法 — setTimeoutの基本と注意点

JavaScriptでは、組み込みの setTimeout() メソッドを使うことで、任意の関数の実行を簡単に遅延させることができます。

たとえば、「3秒後にアラートダイアログを表示したい」というケースを考えてみましょう。

まず、3秒をミリ秒（ms）に変換します。3秒＝3000msです。その値をもとに、次のように関数を設定します。

setTimeout(function() {
  alert("3秒経ちました！")
}, 3000)

上記のコードで使っているのは無名関数（匿名関数）です。しかし実際の開発では、この書き方はあまり実用的とは言えません。再利用ができず、コードの意図も伝わりにくいためです。

そこで、まったく同じ機能を名前付きの関数式として書き直したのが、以下の例です。

const delayThreeSeconds = function() {
  alert("3秒経ちました！")
}

setTimeout(delayThreeSeconds, 3000)

こうすることで、プロジェクト内のどこからでも delayThreeSeconds 変数を参照でき、同じ遅延処理を自由に再利用できるようになります。

setTimeoutの遅延時間は「目安」であり、正確ではない

あまり知られていないことですが、setTimeoutに指定する時間は「最低限の実行待ち時間」であり、関数が実際に実行されるまでの正確な時間ではありません。

つまり、3000ms（3秒）を指定しても、関数の実行がそれより大幅に遅れる可能性があります。JavaScriptは同期（シングルスレッド）で動作し、一度に1つのタスクしか処理できないためです。

したがって、サイト上に setTimeout より先に実行されるよう設定された他のJavaScriptタスクが多数ある場合、それらのタスクが完了するまで待機する必要があります。所要時間は数ミリ秒程度のこともあれば、数秒に及ぶこともあります。

大きな遅延を引き起こす典型例として、外部ソースから巨大なスクリプトを読み込む必要がある関数が挙げられます。こうした落とし穴は、初心者だけでなく経験豊富な開発者でも陥りやすいものです。

以上の理由から、setTimeout はやや予測しにくいメソッドであり、ミリ秒単位の正確さが求められる場面では信頼性に欠けるといえます。

この問題を回避するシンプルな方法

タイミングの正確さが特に重要な関数がある場合は、他のどの関数よりも先に実行されるよう設定しましょう。少なくとも、最も重要な関数が最速で実行されることは保証できます。

ただし、最重要の関数を最初に実行するようにしても、なお多少の実行遅延が発生する可能性は残ります。

たとえば、ユーザーのブラウザに多数のアドオンや拡張機能がインストールされている場合です。これらのソフトウェアもJavaScriptで動作しており、それがあなたのサイトのコード実行にどれほどの遅延をもたらすか（あるいはまったく影響しないか）を事前に予測することは不可能です。

だからこそパフォーマンスへの配慮が極めて重要であり、一貫したユーザー体験を提供するためには、あらゆるブラウザ・複数のデバイスでコードのパフォーマンスを検証することが不可欠なのです。

補足： 今回学んだ内容は setInterval メソッドにもそのまま当てはまります。両者の違いは、setIntervalが指定間隔で繰り返し実行されるのに対し、setTimeoutは一度だけ実行されるという点です。