非同期タスク用に JavaScript で待機関数を実装するにはどうすればよいですか?

JavaScript のタイミング遅延

JavaScript のタイミング遅延を理解することは、応答性が高く効率的な Web アプリケーションを構築するために重要です。この記事では、コード行を実行する前に特定の時間待機するという問題に対処します。

問題:

初心者の JavaScript 開発者が遭遇した問題関数が条件を評価する前に意図したとおりに待機しない問題。予期される動作は、特定の状態が変更されたかどうかを確認する前に 5 秒待機することです。ただし、現在の関数は待機せずにすぐにチェックします。

解決策:

この望ましい動作を実現するには、次のアプローチを利用できます:

ブラウザ:

最新の async/await 構文 (ECMAScript 6 以降をサポートするブラウザで利用可能) を使用すると、次の解決策を採用できます:

<code class="javascript">const delay = ms => new Promise(res => setTimeout(res, ms));

async function yourFunction() {
  await delay(5000);
  console.log("Waited 5s");

  await delay(5000);
  console.log("Waited an additional 5s");
}</code>

このアプローチでは、非同期で実行しているにもかかわらずコードが同期しているように見えるため、コードが簡素化されます。

Node.js:

Node.js バージョン 16 以降では、組み込みの Promise ベースの setTimeout 関数:

<code class="javascript">import { setTimeout } from "timers/promises";

async function yourFunction() {
  await setTimeout(5000);
  console.log("Waited 5s");

  await setTimeout(5000);
  console.log("Waited an additional 5s");
}</code>

注意:

競合状態を避けるために遅延関数を使用することに注意することが重要です (特に非同期をテストする場合)コード) は、最適ではない解決策につながる可能性があるため、慎重に行う必要があります。

以上が非同期タスク用に JavaScript で待機関数を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。