JavaScript で経過時間を検索する

JavaScript で特定の操作を実行するのに費やした合計時間を調べる必要がある場合があります。たとえば、ユーザーがプロファイルの更新に費やした合計時間を見つける必要があります。

さらに、特定の時刻と現在の時刻の差を求めて合計経過時間を求める必要がある、同様の使用例が他にもあるかもしれません。ここでは、JavaScript で経過時間を調べるさまざまな方法を学びます。

JavaScript で Date() オブジェクトを使用して経過時間を確認する

JavaScript では、Date() オブジェクト コンストラクターを使用して現在時刻を取得できます。 1970 年 1 月 1 日からの合計ミリ秒数を返します。

ここでは、2 つの日付間の合計ミリ秒の差によって、2 つの日付間の経過時間を取得できます。

ユーザーは、次の構文に従って Date() オブジェクト コンストラクターを使用して、JavaScript で経過時間を確認できます。

上記の構文では、まず開始時刻を取得します。その後、終了時間を迎えました。経過時間を取得するには、開始時間と終了時間の差を取得します。

例 1

以下の例では、現在の時刻を startTime 変数に保存します。その後、loopThrough() 関数を呼び出します。この関数はループを 6,00,000 回実行します。

関数の実行が完了したら、現在の時刻を endTime 変数に保存します。その後、endTime と startTime の差を計算して、関数の実行にかかった合計時間を取得します。

例 2

次の例は、特定の日付と現在時刻との時差を示しています。その後、formatDate() 関数を呼び出して、日付を日、時、分、秒の形式にフォーマットします。

formatDate() 関数では、時差をパラメータとして取得し、合計の日数、時間、分、秒を取得します。出力では、ユーザーは 2019 年 12 月 31 日からの合計経過時間を確認できます。

Console.time() 関数を使用する

console.Time() メソッドはパラメータとしてラベルを受け取ります。特定のラベルを使用して console.time() メソッドを呼び出すたびに、時間のカウントが開始されます。

console.timeEnd() メソッドは、console.time() メソッドのパラメータとして渡したものと同じラベルを受け取り、console.time() メソッドが呼び出されてからの経過時間を出力します。

ユーザーは、次の構文に従って console.time() 関数を使用して、JavaScript で使用された合計時間を確認できます。

上記の構文では、console.time() メソッドと console.timeEnd() メソッドに同じラベルが付けられます。

例 3

次の例では、まず「実行時間」ラベルをパラメータとして渡して console.time() メソッドを実行します。その後、ループを 1,00,000 回呼び出します。次に、同じラベルを使用して console.timeEnd() メソッドを呼び出し、合計経過時間をコンソールに出力します。

Performance.now() メソッドを使用する

ユーザーは Performance.now() メソッドを使用して、JavaScript コードの実行にかかった合計時間を取得できます。経過時間をミリ秒単位で返します。

ユーザーは、以下の構文に従って Performance.now() メソッドを使用して、JavaScript で経過時間を確認できます。

上記の構文で開始時刻と終了時刻の差を計算しました。

例 4

以下の例では、JavaScript コードの実行開始時に Performance.now() メソッドを使用します。その後、setTime() メソッドを使用して時間を 1000 ミリ秒に設定します。

タイムアウトになると、コールバック関数が実行され、Performance.now() メソッドが再度呼び出され、startTime と endTime の差を取得して合計実行時間を見つけます。

結論

ユーザーは、JavaScript で経過時間を確認する 3 つの方法を学びました。 1 つ目の方法は、Date() オブジェクトを使用することです。 2 番目の方法は、console.time() メソッドと console.timeEnd() メソッドを使用することで、常にコンソールに時刻を出力します。 3 番目の方法は、Performance.now() メソッドを使用することです。

以上がJavaScript で経過時間を検索するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。