マクロタスクとマイクロタスクに関する質問です。 setTimeout(関数(){ コンソールログ('1') }); 新しいPromise(function(resolve){ コンソールログ('2'); 解決する(); }).then(関数(){ コンソールログ('3') }); コンソールログ('4') 上記のコードの実行順序は何ですか?
おそらく、次のように考えているのでしょう。js が 1 行ずつ実行されることを知らないのでしょうか。SetTimeout ちょっとパニックになったので、ブラウザに貼り付けて見てみました。 信じられない 混乱しながらも、JavaScriptの動作の仕組みをじっくり勉強するしかありません! 1. JavaScriptについて
2. JavaScript イベントループjs はシングルスレッドなので、ウィンドウが 1 つしかないカフェテリアのようなものです。学生は 1 人ずつ並んで食事を取る必要があります。同様に、js タスクも 1 つずつ順番に実行する必要があります。このモードは実行が簡単ですが、将来的に需要、トランザクション、リクエストが増加すると、このシングルスレッド モードの実行効率は必然的に低くなります。 1 つのタスクの実行に長い時間がかかる場合、その間に後続のタスクを実行することはできません。 ニュースに含まれる高解像度の写真の読み込みが非常に遅いのはよくあることです。写真が完全に表示されるまで、Web ページが停止したままでよいのでしょうか?この問題を解決するために、 JavaScript 言語ではタスク実行モードを同期と非同期に分けます。
地図の内容を言葉で表現すると次のようになります。
コード式の場合: データ = [] とします。 $.ajax({ url:blog.csdn.net、 データ:データ、 成功:() => { console.log('送信に成功しました!'); } }) console.log('コード実行が終了しました'); 上記は単純な Ajax リクエスト コードです。
上記のテキストとコードを通じて、js の実行順序について大まかに理解していただけたと思います。しかし、これは、何人かの友人が 2、4、1、3 と答えた理由でもあります。 しかし、実際には、非同期キューにはまだトリックが残っています。面接の質問では、 3. マクロタスクとマイクロタスクマクロタスクとマイクロタスクは標準ではないため、人によって理解の仕方は異なりますが、js では実行順序が統一されています。 マクロタスク:
マイクロタスク:
マクロタスクには以下が含まれます: <script> 全体のコード、 process.nextTickは大きく異なり、異なるノードは均一に実行されず、標準がありません。 ヒント: <script> コード全体をマクロ タスクに入れる人もいますが、私は個人的には好きではありません。私の場合は、実行のメイン スレッドだけです。私は個人的に、マクロ タスクとマイクロ タスクの両方を非同期タスクに分類しています。 面接の質問をもう一度見てみましょう。 //コールバックは非同期タスクです setTimeout(function(){//macro task console.log('1') }); 新しいPromise(function(resolve){ console.log('2');//メインスレッドを同期するresolve(); }).then(function(){//microtask console.log('3') }); console.log('4') //メインスレッドを同期する
したがって、結果は 2、4、3、1 です。 さらに、これについて詳しく説明しましょう。 setTimeout(() =>{//マクロタスクキュー1 console.log('1'); //マクロ タスク チーム 1 タスク 1 setTimeout(() =>{//マクロタスクキュー3(マクロタスクキュー1内のマクロタスク) コンソールログ('2') }, 0) 新しいPromise(resolve => { 解決する() console.log('3') //マクロタスクキュー1タスク2 }).then(() =>{//マクロタスク キュー 1 のマイクロタスク console.log('4') }) }, 0) setTimeout(() =>{//マクロタスクキュー2 コンソールログ('5') }, 0) console.log('6') //メインスレッドを同期する
上記のコードでは何が出力されますか? 4. マクロタスクとマイクロタスクを拡張する上記の質問は複雑です。よく考えてみてください。この複雑な状況で、どのように一つずつ実行すればよいのでしょうか。
検証後、結果は正しいです! js のマクロタスクとマイクロタスクに関するこの記事はこれで終わりです。js のマクロタスクとマイクロタスクに関する関連情報をさらに知りたい場合は、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...
Elasticsearch 6.8 以降、無料ユーザーは X-Pack のセキュリティ機能を使用でき...
<br />何の警告もなく、cnBeta で TOM.COM の Web サイトが再設計...
AND キーワードを使用した MySQL 複数条件クエリ。MySQL では、AND キーワードを使用...
具体的なコードは次のとおりです。 <スタイル> #トーストローダーフルスクリーン{ 高さ...
Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...
序文トランザクション データ ディクショナリとアトミック DDL は、MySQL 8.0 で導入され...
インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...
[LeetCode] 183.注文しない顧客Web サイトに、Customers テーブルと Or...
この記事は主に、Vue のレスポンシブ ソース コードを理解していない、または触れたことがない人向け...
目次序文一目でわかる建築オペレーティングシステムとの対話シングルスレッドイベント駆動/イベントループ...
今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...
Mixin は、再利用可能な機能を Vue コンポーネント間で分散する非常に柔軟な方法を提供します。...
インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...
今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...