ホームページ > 記事 > ウェブフロントエンド > JavaScriptの非同期とは何ですか

JavaScriptの非同期とは何ですか

小云云オリジナル: 2017-12-02 09:05:231678ブラウズ

新しいプログラマとして、私たちは非常に単純な問題に遭遇することがよくありますが、たとえば、バックグラウンドからデータを呼び出してフロントページに表示したい場合、出力結果は常に空であり、何が起こっているのかわかりません。未定義です。データを取得できません。その理由は何でしょうか?さまざまなソースから情報を検索した結果、JS 非同期の「落とし穴」に陥っていることがわかりました。そう、この記事では主に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(&#39;aaa&#39;);
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        console.log(&#39;bbb&#39;);
        return data;
      });
    }
    var data = getUserInfo();
    console.log(data);
    console.log(&#39;ccc&#39;);
    renderUserInfo(data);

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

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

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

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

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

上記の内容はJavaScript非同期について詳しく解説していますので、皆様のお役に立てれば幸いです。

JavaScriptの非同期とは何ですか

関連記事