jsで非同期メソッドを実装する初心者必読の本

今回は初心者必見のjs実装の注意事項をご紹介します。実際の事例を見てみましょう。

ある日突然バックグラウンドからデータを呼び出してフロントページに表示するメソッドを書いたのですが、出力結果は常に未定義でデータが取得できませんでした。さまざまなソースから情報を検索した結果、JS 非同期の「落とし穴」に陥っていることがわかりました。

シングルスレッド、マルチスレッド、同期、非同期という概念をよく耳にしますが、これらは一体何なのでしょうか?
それでは、上記の概念から始めましょう

シングルスレッド、マルチスレッド、同期、非同期の基本的な理解

実行中のすべてのプログラム (つまりプロセス) には、メイン スレッドと呼ばれる少なくとも 1 つのスレッドがあります。メインスレッドはプログラムの起動時に作成され、メイン関数を実行するために使用されます。

1. シングル スレッドは、メイン スレッドが 1 つだけあるスレッドです。メイン スレッドは、プログラムのすべてのコード (UI の表示と更新、ネットワーク リクエスト、ローカル ストレージなど) を実行します。 ) [1 つのスレッドですべてが完了します。考えるだけで少し疲れます]

2. マルチスレッドとは、その名前が示すように、ユーザーが独立して作成できる複数のスレッドを持つプログラムです。ユーザーが個別に作成したいくつかのプロセスは、メインスレッドに対する子スレッドです。子スレッドとメインスレッドは独立した実行単位であり、それぞれの実行は相互に影響を及ぼさないため、同時に実行できます。

辛口な理論を聞いているだけで、少しめまいを感じませんか？ 偶然ですが、私も初めて見たときはめまいがしました。

情報を探している過程で、他の人からのこのような鮮やかな比喩を見つけました。

たとえば、シングルスレッドとは、キッチンに行って料理をし、1 人が行ったり来たりすることを意味します。マルチスレッドとは、2 人がいて、1 人が一人で料理をし、もう 1 人が料理をすることを意味します。

だから、もっと理解しやすいはずですよね？

そして、同期と非同期とは何ですか?

シンプルな生活の例で説明してみましょう。

ホテルに電話してホテルを予約し、スタッフに部屋があるかどうかを尋ねます。このとき、スタッフは応答する前に部屋があるかどうかを確認する必要があります。

同期とは、電話を切らずに、スタッフが部屋があるかどうかを知らせるまで待つことを意味します。
非同期とは、電話を切り、飲食など他のことをし、スタッフが情報を見つけて電話をかけることを意味します。

それでは、ここからが本題です

JSの非同期操作とは何ですか?

JS の実行環境はシングルスレッドです。つまり、プログラムが順次実行される場合、一度に 1 つのタスクのみを実行できます。プログラムをさらに実行したい場合は、現在のタスクが実行されるまで待つ必要があります。現在のタスクの実行にどれだけ時間がかかっても (後続のプログラムが急いで実行されるのを待つのが本当に不快な場合)。

後続のプログラムの不快なブロック問題を解決するため。 JavaScriptには非同期処理モードがあり、実際には遅延処理になります。

別の例を挙げて説明しましょう。

りー

getUserInfo 関数が呼び出されると、バックグラウンドからデータを取得するのに時間がかかる場合があります。これにより、renderUserInfo はデータが取得されるまで待機してから実行する必要があります。幸いなことに、JS には非同期操作があり、データをフェッチするときに renderUserInfo がデータをフェッチするのを待つ必要はなく、直接実行できます。

そうは言っても、これら 2 つの関数はどのような順序で実行されるのでしょうか?心配しないで、デバッグをしましょう:

var getUserInfo = function () {
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        return data;
      });
    }
    var data = getUserInfo();
    renderUserInfo(data)

逐次実行の出力は当初「aaa」「bbb」「ccc」と考えられていましたよね？

つまり、関数が getJSON を実行してデータを取得する場合、プログラムは次のステップを実行する前にデータの取得を待機せず、データの取得段階をスキップして、出力データを直接実行します。も空いています。

これがJSの非同期の仕組みです。

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

推奨読書:

プロジェクトでJSとajaxのホモロジー戦略を使用する方法

キャンバス上で軌跡の再生を実装する方法

以上がjsで非同期メソッドを実装する初心者必読の本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。