JavaScript の非同期について (詳細なチュートリアル)

JavaScriptの非同期は初心者向けに書かれており、一定の参考値があり、興味のある友人は参考にすることができます

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

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

シングルスレッド、マルチスレッド、同期、非同期についての基本的な理解です

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

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

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

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

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

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

そうすればわかりやすいですよね？

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

シンプルな生活の例を使って説明します。

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

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

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

JSの非同期操作とは何でしょうか？

JS の実行環境はシングルスレッドです。つまり、プログラムが順次実行される場合、一度に 1 つのタスクのみを実行できます。プログラムを実行したい場合は、現在のタスクが実行されるまで待機する必要があります。現在のタスクが実行されるかどうかに関係なく、実行されます (後続のプログラムが急に実行されると、待つのが非常に不快になります)。

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

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

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

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

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

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

順次実行の出力は、当初は "aaa"、"bbb"、"ccc" であると考えられていましたよね。

しかし、物事はそれほど単純ではありません。コンソール出力を見てみましょう:

出力結果は連続していません。

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

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

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptを使用して左側のメニュー効果を実現する方法

JavaScriptで全選択-キャンセル効果を実現する方法

vuexを呼び出してvue.jsにインターフェースデータを保存する方法

以上がJavaScript の非同期について (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。