JavaScriptで次の行を実行する前に5秒待つにはどうすればよいですか?

次の行を実行する前に 5 秒待機します

JavaScript では、setTimeout() 関数は、指定されたミリ秒数の後に関数が実行されるようにスケジュールします。ただし、コードの実行は停止しません。つまり、指定された遅延に関係なく、コードの次の行が setTimeout() 呼び出しの直後に実行されます。

コード

コードは、newState が -1 に等しいかどうかを確認する前に 5 秒待機することを目的としています。ただし、setTimeout() はコードをブロックしないため、5 秒の遅延が発生する前に、チェックがすぐに行われます。

解決策

望ましい動作を実現するには、メカニズムを使用する必要があります。コードの実行を 5 秒間一時停止することができます。検討できる最新のアプローチは 2 つあります。

1. Async/Await 構文 (ブラウザのみ)

ES6 では、より同期的なスタイルで非同期コードを作成できるようにする async/await 構文が導入されました。関数を非同期としてマークすると、await キーワードを使用して、Promise が解決されるまで実行を一時停止できます。

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

const stateChange = async newState => {
  await delay(5000);

  if (newState === -1) {
    alert('VIDEO HAS STOPPED');
  }
};</code>

2. Timers/Promises モジュール (Node.js のみ)

Node.js 16 では、timers/Promises モジュールは setTimeout の Promise ベースのバージョンを提供します。これにより、実行を一時停止し、遅延が完了するまで待ってから続行することができます。

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

const stateChange = async newState => {
  await setTimeout(5000);

  if (newState === -1) {
    console.log('VIDEO HAS STOPPED');
  }
};</code>

これらのアプローチの両方で、newState チェックが実行される前にコードの実行が 5 秒間停止されることが保証されます。

以上がJavaScriptで次の行を実行する前に5秒待つにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。