遅延、睡眠、一時停止、JavaScriptで待機します

JavaScriptには組み込みの睡眠機能がありませんが、心配しないでください！この記事では、言語の非同期機能を念頭に置いている間、JavaScriptコードにレイテンシを実装するさまざまな方法について説明します。

キーポイント

1. 非同期JavaScriptの遅延の実装：この記事では、言語の非同期性を強調し、JavaScriptコードに遅延を実装するためのさまざまな手法を調査します。睡眠機能が組み込まれた他の多くのプログラミング言語とは異なり、JavaScriptは遅延を導入するための代替方法が必要です。この記事は、説明と実証を目的としています。
2. JavaScriptの実行モデルを理解する： JavaScriptでレイテンシを実装する重要な側面は、その実行モデルを理解することです。 JavaScriptは、Rubyなどの言語とは異なる非同期操作を処理します。これは、タイミングと操作シーケンスの予期しない動作につながる可能性があります。この記事では、この違いを例で強調し、JavaScriptのイベント駆動型モデルが遅延機能の実行にどのように影響するかを示します。
遅延を作成するためのベストプラクティス：
3. この記事では、、Promise、の使用など、遅延を作成するいくつかの方法について説明し、各メソッドの最良のユースケースについて説明します。また、イベントループをブロックするなどの一般的な落とし穴を説明し、JavaScript開発における時間と非同期操作を効果的に管理するための効果的なソリューションとベストプラクティスを提供します。 setTimeout async/await

javascript

で睡眠機能を作成する方法 技術的な詳細を掘り下げることなく問題を迅速に解決したい読者のために、ここに最も直接的な方法があります：

このコードを実行すると、コンソールに「Hello」がポップアップ表示されます。その後、2秒間の一時停止の後、「World！」が続きます。これは、努力なしで遅延を導入するためのきちんとした効果的な方法です。

<code class="language-javascript">function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log('Hello');
sleep(2000).then(() => { console.log('World!'); });</code>

あなたがこのために来たら素晴らしいでしょう！しかし、「なぜ」と「方法」に興味があるなら、もっと学ぶべきです。 JavaScriptの時間を扱うとき、あなたが役立つかもしれないいくつかのニュアンスと複雑さがあります。それで、読んでもっと学ぶために読んでください！

javascriptの実行モデルを理解してください

迅速なソリューションを習得したので、JavaScript実行モデルのメカニズムに飛び込みましょう。これを理解することは、コードで時間と非同期操作を効果的に管理するために不可欠です。

次のルビーコードを検討してください：

予想されるように、このコードはGitHub APIにユーザーデータを取得するようリクエストします。次に、応答を解析し、GitHubアカウントに属する公開リポジトリの数を出力し、最終的に「Hello！」を印刷します。実行順序は上から下までです。

<code class="language-ruby">require 'net/http'
require 'json'

url = 'https://api.github.com/users/jameshibbard'
uri = URI(url)
response = JSON.parse(Net::HTTP.get(uri))
puts response['public_repos']
puts 'Hello!'</code>

これを同等のJavaScriptバージョンと比較します：

<code class="language-javascript">function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log('Hello');
sleep(2000).then(() => { console.log('World!'); });</code>

このコードを実行すると、最初に「Hello！」を出力し、次にGitHubアカウントに属する公開リポジトリの数を出力します。

これは、APIからデータを取得することがJavaScriptの非同期操作であるためです。 JavaScriptインタープリターはFetchコマンドに遭遇し、リクエストをスケジュールします。ただし、リクエストが完了するのを待ちません。代わりに、「Hello！」をコンソールに出力し、数百ミリ秒後にリクエストが返されると、リポジトリの数が出力されます。

これらのコンテンツがあなたにとって新しい情報である場合、この優れた会議のスピーチを見る必要があります：とにかくイベントループは何ですか？

（次のコンテンツは元のテキストに似ていますが、擬似オリジナル効果を達成し、元の意図を変更しないように、単語の置換と文の構造の調整が実行されています） JavaScriptの実行モデルをよりよく理解しているので、JavaScriptがレイテンシと非同期コードをどのように処理するかを見てみましょう。

JavaScriptに遅延を作成する標準的な方法は、そのメソッドを使用することです。たとえば、

これは、「Hello」をコンソールに記録し、2秒で「世界」を記録します。多くの場合、これで十分です。いくつかの操作を実行し、短時間の遅延後に他の操作を実行します。それをやってください！

しかし、残念ながら、物事は必ずしもそれほど単純ではありません。 setTimeout

<code class="language-ruby">require 'net/http'
require 'json'

url = 'https://api.github.com/users/jameshibbard'
uri = URI(url)
response = JSON.parse(Net::HTTP.get(uri))
puts response['public_repos']
puts 'Hello!'</code>

プログラム全体を一時停止すると思うかもしれませんが、そうではありません。これは非同期関数です。つまり、コードの残りの部分が終了するのを待たないことを意味します。

たとえば、

次のコードを実行しているとします：

次の出力が表示されます：setTimeout

「さようなら！」これは、

が残りのコードの実行を妨げないためです。

<code class="language-javascript">fetch('https://api.github.com/users/jameshibbard')
  .then(res => res.json())
  .then(json => console.log(json.public_repos));
console.log('Hello!');</code>

これは、これを行うことができないことを意味します：

<code class="language-javascript">console.log('Hello');
setTimeout(() => {  console.log('World!'); }, 2000);</code>

「こんにちは」と「ワールド」は、顕著な遅延なしにすぐにコンソールにログに記録されます。 setTimeout

これもできません：

<code class="language-javascript">console.log('Hello');
setTimeout(() => { console.log('World!'); }, 2000);
console.log('Goodbye!');</code>

上記のコードスニペットで何が起こるかを考えるために秒を浸します。

it

は、1秒の遅延で0〜4の数字を印刷しません。代わりに、1秒の遅延の後、0〜4の数値はコンソールに記録されます。なぜ？ループが実行を一時停止しないためです。次の反復に進む前に

が完了するのを待ちません。

<code>Hello
Goodbye!
World!</code>

目的の出力を取得するには、

から

ミリ秒の遅延を調整する必要があります。 setTimeoutこれにより、

ステートメントの実行が止まり、各出力の間に1秒の間隔があることを確認します。

setTimeoutここでの重要なのは、i * 1000

がプログラムの実行をブロックしないことですが、JavaScriptインタープリターは残りのコードを処理し続け、タイマーの有効期限が切れた後にのみ実行コールバック関数に戻ります。

<code class="language-javascript">console.log('Hello');
setTimeout(1000);
console.log('World');</code>

では、console.logの使用は何ですか？今見てみましょう。

（後続のセクションでも同様の書き換えが必要であり、元の意味を維持し、キーワードと文の構造を置き換え、元のテキストの直接コピーを回避します）ここで書き直します。 上記の例に基づいて、残りの部分で擬似オリジナル処理を引き続き実行してください。 画像の元の形式と位置を変更しておくことを忘れないでください。

以上が遅延、睡眠、一時停止、JavaScriptで待機しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。