JSでのEventLoopの使い方を詳しく解説

今回は、JS での EventLoop の使用について詳しく説明します。JS で EventLoop を使用する際の注意事項は何ですか?実際の事例を見てみましょう。

たとえば、ブラウザーが複雑な画像変換アルゴリズムを実行していると、この時点ではブラウザーのプロセスがブロックされ、インターフェイスをレンダリングしたり、他のコードを実行したりできなくなります。ユーザーとの対話。

通常、これは大きな問題ではありませんが、ブラウザが複数の同様のアルゴリズムを同時に実行している場合、この問題は深刻になります。

一定の経験を持つほとんどの JS 開発者は、コードの非同期実行、特に ajax の使用を理解しています。

りー

この応答では、望む結果は得られません。

代わりに、対面メソッドのようにコールバック関数を通じて結果を取得する必要があります

// ajax(..) is some arbitrary Ajax function given by a library
var response = ajax('https://example.com/api');
console.log(response);
// `response` won't have the response

また、ここで注意していただきたいのは、次のコード async: false は決して良いアイデアではありません。

りー

上記の例を通して、非同期関数がブラウザーのブロックと同様の問題の解決に役立つことを理解する必要があります。

もちろん、setTimeout(callback, milliseconds) を使用して同じロジックを実装することもできます。非同期を理解している場合、次のコードを実行すると何が出力されるでしょうか?

りー

では、非同期処理の仕組みはどのような原理になっているのでしょうか？ここではイベントループEvent Loopを紹介します

イベント ループには、コール スタックとコールバック キューを監視する単純なジョブ (タスク) があります。呼び出しスタックが空の場合、キューから最初のイベントを取得して呼び出しスタックにプッシュし、効果的に実行します。

この繰り返しは、イベント ループでは Tick と呼ばれます。各イベントは単なる関数のコールバックです。

りー

このコードを実行してください

setTimeout(...) は、コールバックをイベント ループ キューに自動的に配置しないことに注意してください。

タイマーを設定します。タイマーが期限切れになると、ブラウザはコールバックをイベント ループに入れて、将来のティックが実行されるようにします。ただし、キュー内に他のイベントが追加されている可能性があります。コールバックはすぐには実行されません。

JavaScript での非同期コードの使用の入門に関する記事やチュートリアルは数多くありますが、setTimeout(callback, 0) を使用することをお勧めします。 これで、イベント ループがどのように実行され、setTimeout がどのように機能するかがわかりました。

次のコードをよりよく理解できます

ajax('https://example.com/api', function(response) {
  console.log(response); // `response` is now available
});

待機時間は 0 ミリ秒に設定されていますが、ブラウザー コンソールの結果は次のようになります:

こんにちは

さようなら

callback

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueでスロットとスロットスコープを使用する手順の詳細な説明

Baiduマップ上のマーカーオーバーレイを削除する方法

以上がJSでのEventLoopの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。