JavaScriptを使用して、指定された時間が経過した後に関数を実行する方法

組み込みのsetTimeout()を使用して、JavaScript関数の実行を遅らせることができます。 メソッド。

3秒後にアラートダイアログを表示したいとします。

まず、3秒をミリ秒（ms）、つまり3000msに変換してから、関数を設定する必要があります。

setTimeout(function() {
  alert("That’s 3 seconds!")
}, 3000)

上記は匿名（名前のない）関数ですが、1回しか使用できず、説明がないため、実際にはあまり実用的ではありません。

これはまったく同じ機能ですが、名前付きの関数式：

const delayThreeSeconds = function() {
  alert("That’s 3 seconds!")
}

setTimeout(delayThreeSeconds, 3000)

これで、delayThreeSecondsを参照することで、プロジェクトのどこでも遅延関数を再利用できます。 変数。

setTimeout遅延は示唆的であり、正確ではありません

ほとんどの人は、setTimeoutで指定した時間が最小の関数実行遅延であることを知りません。 —実行にかかる正確な量ではありません。

したがって、3000ミリ秒（3秒）を指定すると、関数が実行されるまでにはるかに長い時間がかかる可能性があります。 JavaScriptは同期であるため、一度に1つのタスクを実行します。

したがって、WebサイトにsetTimeoutの前に実行するように設定されている他のJavaScript関数タスクが多数ある場合 機能するには、これらのタスクを最初に完了する必要があり、数ミリ秒から数秒かかる場合があります。

大きな遅延を引き起こす可能性があるのは、関数の1つが外部ソースからの巨大なスクリプトのロードに依存して完了する場合です。これらは、初心者として、または経験豊富な開発者としてさえも陥る可能性のあるトラップの種類です。

これにより、setTimeoutが作成されます やや予測不可能、またはピンポイントの精度が必要な場合は少なくとも信頼性が低い。

この問題を（ほとんど）回避する簡単な方法

プロジェクトに正確なタイミングが重要な特定の機能がある場合は、他の機能の前に実行するように設定します。これにより、少なくとも、最も重要な機能が可能な限り高速に実行されるようになります。

ただし、最も重要な関数が他のコードの前に実行されるように設定されている場合でも、いくつかが存在する可能性があります。 実行遅延。

たとえば、ユーザーがブラウザに多数のアドオン/拡張機能をインストールしている場合です。そのソフトウェアは（とりわけ）JavaScriptで実行され、それがWebサイトのコード実行の遅延を引き起こすかどうかを予測することは不可能です。

これがすべて、パフォーマンスが焦点を当てる重要なトピックである理由であり、すべてのブラウザと複数のデバイスでコードのパフォーマンスをテストすることが、一貫したユーザーエクスペリエンスを提供するために重要である理由です。

知っておきたいこと： 今日学んだことは、setIntervalにも当てはまります メソッドの違いは、繰り返し実行されることです— setTimeout 一度実行します。