JS非同期の実行原理とフィードバックの詳細

4870 ワード

一、JS非同期の実行原理
_; はJavaScriptが単一スレッドであり、ブラウザがマルチスレッドであることを知っています。シングルスレッドの実行には、タスクを1つずつ並べて行う必要があります。タスクを実行するには、長い時間がかかります。（ajaxのように、長い時間がかかります。）この場合は、非同期が必要です。
は非同期を知りたいです。まず、ブラウザには基本的な三つの常駐スレッドがあります。JSエンジンスレッド、イベントトリガスレッド、GUIレンダリングスレッドがあります。
GUIレンダリングスレッドとJSエンジンは互いに反発しており、JSエンジンが実行されるとGUIスレッドが立ち上がり、GUIアップデートがキューに保存され、JSエンジンが空き次第実行される。
そのイベント循環メカニズムから解析します。

JSエンジンスレッドには同期と非同期のタスクがあります。
同期タスクはすべてマスタスレッドで実行され、実行スタックが形成されます。
非同期タスクがある場合は非同期プロセス（WebAPI）に渡す：イベントトリガスレッドやタイマースレッドなどの処理を含み、タスクキューを形成する。
スタック中のタスクを全て処理した場合、メインスレッドが空き状態の場合、タスクキューからタスクを抽出して実行スタックに実行します。
一般的に言えば、JavaScriptはメインライン以外にもタスクキューが存在します。タスクキューは非同期実行が必要な内容を保存して、メインラインのプロセスを実行したら、キューが空になるまで繰り返しスキャンを実行します。
絵の解き方:

明さんは勉強に時間がかかりますから、完成しないとずっとDNFゲームができなくなります。勉強を非同期のタスクフォースに入れて、ゲームを遊んでから勉強します。期間中、母は学習事件（DOM事件）を追加しました。明さんは学習任務を完成するごとに、最後までやり終えます。
下でもう一つの例を見ます。


  let myData = null
  //ajax  
  function ajax() {
  //          ，    
  axios.get('https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare')
   .then(data => {
   console.log("ajax    ");
   myData = data.data
   console.log(myData);

   })
   .catch(error => {
   console.log("ajax    ");
   })
  }
  console.log(myData);
  ajax()
  setTimeout(() => {
  console.log('   ');
  }, 2000);
  console.log(myData);
  const btn = document.querySelector('button')
  btn.onclick = () => {
  console.log("   ");
  }

null
null
ajaxリターン成功
Object
クリックします
タイマー
クリックします
Osoneは、メインスレッドで同期して実行され、先に実行されるが、メインライン以外のタスクキューには、非同期で実行されるコンテンツが格納されており、ここではset Timeout、ajax、DOMイベントであり、タスクキューの順序で実行される（巡回スキャンキュー）。
どうして循環スキャンしますか？
イベントをクリックすることによって、ユーザーがインタラクションする時（イベントをクリックして、スクロールイベント、ウィンドウのサイズを変更するイベントなど）、イベントサイクル中のタスクキューに新しいイベントを追加し、実行を待つためには、ループスキャンが必要です。
二、JS非同期中のコールバック
が非ステップが最後のタスク列で実行されている以上、私たちの多くのロジックは実現しにくいです。この時、私たちはこの非同期ロジックを処理する必要があります。一番よく使う方法はコールバックです。
コールバック関数：簡単に言えば、関数Aの着信関数Bがパラメータとして使用される場合、関数BはA関数のコールバック関数として実行されます。コールバックはネストされたコールバックとチェーンバックの2種類があります。
の下は折り返しの簡単な使い方です。


   let myData = null
   console.log(myData);
   setTimeout(() => {
    console.log('   ');
   }, 2000);
   const btn = document.querySelector('button')
   btn.onclick = () => {
    console.log("   ");
   }
   let name = "  "
   function hr(callback) {
    setTimeout(() => {
     console.log(`  ${name}`);
     callback();
    }, 2001);
   }
   console.log(myData);
   function gj() {
    console.log(`${name}  ，    ，     `);
   }
   hr(gj)

null
null
クリックします
タイマー
張三です
張三さん、こんにちは、李四です。ご紹介しましょう。
クリックします
は明らかに私たちの関数がデータを使用する必要があるときには、コールバックを使用しています。ここでは非同期コールバックを使用しています。
フィードバックは非同期の常用方法ですが、JSのますます複雑な需要に伴っています。同期非同期は、論理を達成するために、より多くのフィードバックが必要です。同期の混雑と多すぎるリピーターの入れ子とインデントはコードを解読して維持しにくくなり、「レプリカ地獄」を形成します。

例を見ます。


const verifyUser = function(username, password, callback){
  dataBase.verifyUser(username, password, (error, userInfo) => {
    if (error) {
      callback(error)
    }else{
      dataBase.getRoles(username, (error, roles) => {
        if (error){
          callback(error)
        }else {
          dataBase.logAccess(username, (error) => {
            if (error){
              callback(error);
            }else{
              callback(null, userInfo, roles);
            }
          })
        }
      })
    }
  })
};

大多数の人は上のコードを見ただけで、頭の凍結の味を感じました。もし一つのプロジェクトに百個以上のコードブロックがあったら、しばらくの間、彼を書く人も頭が痛いと信じています。自分のプロジェクトに来たのは地獄に来たようです。
の一番主要なのは、同時に返事は信用問題があります。彼は執行制御権をある第三者に渡しました。信頼問題を解決するためには、プログラムに様々なロジックを書いて、フィードバックによる信頼問題を解決しなければなりません。
・呼び出しが早すぎる
・呼び出し完了
・呼び出し回数が多すぎて少なすぎて、必要なパラメータをコールバック関数に成功しませんでした。
・起こり得るエラーが飲み込まれます。
特定のロジックを書いて特定の信頼問題を解決することができます。もう難易度が自身の応用価値より大きくなりました。コードが煩雑で、可読性が悪いなどの問題をもたらします。
総合：フィードバック解決の非同期に欠陥がある：
1)人の任務に対する論理的思考に合わない。
復調による信頼問題。
は反調が日増しに明らかになる弊害に直面して、ES 6はPromiseを更新して非同期問題を解決しました。次の編はES 6――Promiseを書きます。
締め括りをつける
ここでは、JS非同期の実行原理とフィードバックについての文章を紹介します。より多くのJS非同期実行原理のフィードバック内容については、以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。

JavaScriptのWindowウィンドウオブジェクト

java二次元配列指定の長さの例の方法