JS 非同期実行の原則とコールバックの詳細

1. JSの非同期実行の原則

JavaScript はシングルスレッドですが、ブラウザはマルチスレッドであることはご存じのとおりです。シングルスレッド実行タスクは、1 つずつキューに入れる必要があります。タスクの実行に時間がかかる場合 (ajax に時間がかかるなど)、応答がなくなり、後続のタスクは実行を待機することになります。ここで非同期性が作用します。

非同期性を理解するには、まずブラウザに JS エンジンスレッド、イベントトリガースレッド、GUI レンダリングスレッドという 3 つの基本的な常駐スレッドがあることを知っておく必要があります。

JS エンジンスレッドとイベントトリガースレッドは一緒にイベントループメカニズムを構成し、GUI レンダリングスレッドと JS エンジンは相互に排他的です。JS エンジンが実行されると、GUI スレッドは中断され、GUI の更新はキューに保存され、JS エンジンがアイドル状態のときにすぐに実行されます。

イベントループメカニズムから分析します。

JS エンジンスレッドは、同期タスクと非同期タスクに分かれています。

1. すべての同期タスクはメインスレッドを通じて実行され、実行スタックを形成します。

2. 非同期タスクがある場合、非同期プロセス (WebAPI) に引き渡されます。これには、イベントトリガースレッドまたはタイマースレッド処理が含まれ、タスクキューが形成されます。

3. 実行スタック内のすべてのタスクが処理され、メインスレッドがアイドル状態になると、タスクはタスクキューから抽出され、実行スタックで実行されます。

簡単に言えば、JavaScript にはメインスレッドに加えてタスクキューもあります。タスクキューには、非同期で実行する必要があるコンテンツが格納されます。メインスレッドが実行されると、キューが空になるまでタスクキュー内のタスクが継続的にスキャンされ、実行されます。

画像の説明:

図に示すように、Xiao Ming は学習に時間がかかり、終了しないと DNF ゲームをプレイできないため、学習を非同期タスクキューに入れます。ゲーム (メインスレッド) を終了してから、学習 (タスクキュー) を行います。この期間中、母親は学習イベント（DOM イベント）を追加します。Xiao Ming は学習タスクを完了するたびに、完了するまで他のタスクがないか確認します（ループスキャン）。

別の例を見てみましょう (ブラウザが更新され、ボタンが継続的にクリックされます)。

  myData = null とします
  //ajaxリクエスト関数ajax() {
  //Tencent COVID-19 リアルタイムデータインターフェース、学習専用 axios.get('https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare')
   .then(データ => {
   console.log("ajax は正常に返されました");
   myData = データ.データ
   コンソールにログ出力します。

   })
   .catch(エラー => {
   console.log("ajax の戻りに失敗しました");
   })
  }
  コンソールにログ出力します。
  アヤックス()
  タイムアウトを設定する(() => {
  console.log('タイマー');
  }, 2000);
  コンソールにログ出力します。
  const btn = document.querySelector('button')
  btn.onclick = () => {
  console.log("クリックされました");
  }

ヌル
ヌル
ajaxは成功を返します
物体
タイマーをクリックしました

ご覧のとおり、コンソールはメインスレッドで同期的に実行され、最初に実行されますが、メインスレッド外のタスクキューには、setTimeout、ajax、DOM イベントという非同期的に実行されるコンテンツが格納され、タスクキュー (ループスキャンキュー) の順序で実行されます。

なぜループでスキャンする必要があるのでしょうか?

クリックイベントからわかるように、ユーザーが操作すると (クリックイベント、スクロールイベント、ウィンドウサイズ変更イベントなど)、新しいイベントがイベントループ内のタスクキューに追加され、実行を待機するため、循環スキャンが必要になります。

2. JS 非同期コールバック

非同期操作はすべて最後のタスクキューで実行されるため、多くのロジックの実装は困難です。この時点で、この非同期ロジックを処理する必要があります。最も一般的な方法は、コールバック (コールバック) です。

コールバック関数: 簡単に言えば、関数 A が関数 B をパラメータとして渡すと、関数 B は関数 A によって実行されるコールバック関数になります。コールバックには、ネストされたコールバックとチェーンされたコールバックの 2 種類があります。

コールバックの簡単な使用法は次のとおりです。

   myData = null とします
   コンソールにログ出力します。
   タイムアウトを設定する(() => {
    console.log('タイマー');
   }, 2000);
   const btn = document.querySelector('button')
   btn.onclick = () => {
    console.log("クリックされました");
   }
   名前を「張三」とする
   関数hr(コールバック) {
    タイムアウトを設定する(() => {
     console.log(`私は${name}です`);
     折り返し電話（）;
    }, 2001);
   }
   コンソールにログ出力します。
   関数gj() {
    console.log(`${name} こんにちは、私はLi Siです。お互いを知りましょう`);
   }
   時間(gj)

ヌル
ヌル
タイマーをクリックしました。私は張三です。こんにちは、李思です。お互いを知りましょう。クリックしました

関数がデータを使用する必要がある場合、コールバックが使用されることは明らかです。ここでは、非同期コールバックが使用されています。

コールバックは非同期性を解決するための一般的な方法ですが、JS の要件はますます複雑になっています。同期と非同期では、ロジックを実装するためにますます多くのコールバックが必要になります。同期操作と非同期操作の混在、および過度のコールバックのネストとインデントにより、コードの解釈と保守が困難になり、「コールバック地獄」が形成されます。

例を見てみましょう:

const verifyUser = function(ユーザー名, パスワード, コールバック){
  dataBase.verifyUser(ユーザー名、パスワード、(エラー、ユーザー情報) => {
    if (エラー) {
      コールバック(エラー)
    }それ以外{
      dataBase.getRoles(ユーザー名、(エラー、ロール) => {
        (エラー)の場合{
          コールバック(エラー)
        }それ以外 {
          dataBase.logAccess(ユーザー名、(エラー) => {
            (エラー)の場合{
              コールバック(エラー);
            }それ以外{
              コールバック(null、userInfo、roles);
            }
          })
        }
      })
    }
  })
};

ほとんどの人は、上記のコードを見ただけで頭が凍りつくでしょう。プロジェクトにこのようなコードブロックが何百もあると、しばらくすると、それを書いた本人でさえ頭痛がすると思います。自分のプロジェクトに来るのは地獄に来るようなものです。

最も重要なことは、同時に、コールバックによって実行制御がサードパーティ (ajax など) に渡されるため、信頼性の問題があることです。信頼の問題を解決するには、コールバックによって発生する信頼の問題を解決するためのさまざまなロジックをプログラム内に記述する必要があります。

早すぎる電話

·通話完了

呼び出し回数が多すぎるか少なすぎるため、必要なパラメータがコールバック関数に正常に渡されません。

起こりうるエラーは無視されます。

特定の信頼問題を解決するために特定のロジックを記述すると、アプリケーション自体の価値よりも困難さが大きくなり、冗長なコードや可読性の低さなどの問題も発生することがわかります。

要約すると、コールバックは非同期の問題を解決します。

1) タスク処理における人間の論理的思考に適合しない

2) コールバックによって生じる信頼の問題。

コールバックの欠点がますます明らかになったことを受けて、ES6 では非同期の問題を解決するために Promise が更新されました。次の記事では、ES6——Promise について書きます。

要約する

JS 非同期実行原理とコールバックに関するこの記事はこれで終わりです。より関連性の高い JS 非同期実行原理コールバックのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: