JavaScript の非同期プログラミングをステップごとに理解します。

この記事では、JavaScript での非同期プログラミングについて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

非同期とは非同期を意味します....

このセクションは少し退屈かもしれませんが、JavaScript では非常に重要な概念であり、非常に重要です。役に立つので、学ぶ必要があります。

#目的

開発効率を向上させ、保守しやすいコードを作成します

導入の質問

リクエスト時にページが停止するのはなぜですか? ?

• $.ajax({
    url: "www.xx.com/api",
    async: false, // true
    success: function(result) {
      console.log(result);
    },
  });

データは更新されるのに、DOM が更新されないのはなぜですか? ?

• // 异步批量更新DOM（vue-nextTick）
  // <p id="app">{{num}}</p>
  new Vue({
    el: "#app",
    data: {
      num: 0,
    },
    mounted() {
      let dom = document.getElementById("app");
      while (this.num !== 100) {
        this.num++;
      }
      console.log("Vue num=" + this.num, "DOM num=" + dom.innerHTML);
      // Vue num=100,DOM num=0
      // nextTick or setTimeout
    },
  });

非同期生成の理由

原因: シングル スレッド (1 つの時点で 1 つのことだけを行う)、ブラウザの JS エンジンがシングル スレッドである引き起こされた。

シングル スレッドとは、JS エンジンで IavaScript コードの解釈と実行を担当するスレッドが 1 つだけあることを意味します。これをメイン スレッドと呼ぶこともできます。

いわゆるシングル スレッドとは、一度に 1 つのタスクのみを完了できることを意味します。複数のタスクがある場合は、それらをキューに入れる必要があり、前のタスクが完了してから次のタスクが実行されます。

まずブラウザ カーネルのスレッド図を見てください。

その中には、

レンダリング スレッドと JS スレッドがあります。 は相互に排他的です。

DOM ノードを変更と削除の 2 つの関数が同時に操作しているとします。複数のスレッドがある場合、2 つのスレッドが同時に実行されると、必ずデッドロックが発生します。そして問題も起こるだろう。

JS がシングルスレッドとして設計されるべき理由は、ブラウザーの特殊な環境のためです。

シングル スレッドの長所と短所:

このモードの利点は、実装が比較的簡単で、実行環境も比較的シンプルであることです。

欠点は、 1 つのタスクに時間がかかると、後続のタスクをキューに入れて待機する必要があり、プログラム全体の実行が遅れます。一般的なブラウザの応答不能 (サスペンドデス) は、特定の Javascript コードが長時間実行される (無限ループなど) ことが原因で発生することが多く、その結果、ページ全体がその場所でスタックし、他のタスクが実行できなくなります。

一般的な障害 (無限ループ):

while (true) {}

JS はもともとブラウザーで実行されるスクリプト言語として設計されていたため、それほど複雑にはしたくありませんでした。これは単一のスレッドになりました。つまり、

は一度に 1 つのことしか実行できません。

シングルスレッドブロッキングを解決するには

この欠点: 非同期が生成されます。 インスタント ラーメンを食べる例を挙げます。

同期: インスタント ラーメンを買う => 水を沸騰させる (見つめる) => 麺を調理する => インスタント ラーメンを食べる

• 非同期 : インスタント ラーメンを買う => 水を沸騰させる (水が沸騰し、やかんが鳴る - コールバック) => テレビを見る => 麺を調理する (麺の準備ができてやかんが鳴る - コールバック) => テレビを見る => 時間が来たら電話する完了 => インスタント ラーメンを食べる
• テレビを見ることは非同期操作であり、やかんの音はコールバック関数です。

非同期プログラミング

JS のコードの大部分は同期的に実行されます。非同期で実行される関数はほんのわずかです。非同期で実行されるコードには非同期プログラミングが必要です。

非同期コード

setTimeout(() => {
  console.log("log2");
}, 0);
console.log("log1");
// ?? log1 log2

非同期コードの特徴:

コードはすぐには実行されませんが、待機して将来の特定の時点で実行される必要があります。

# 同期コード

#非同期コード