マクロタスクとマイクロタスクに関する質問です。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
div または span に同時に CSS を適用する必要があります。コードをコピーコードは次のとお...
現在、CSS プリプロセッサは Web 開発の標準となっています。 プリプロセッサの主な利点の 1 ...
1. 重複行を見つける blog_user_relation a から * を選択 WHERE (...
1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...
序文MySQL マスター/スレーブ レプリケーションは、アプリケーションの高パフォーマンスと高可用性...
今日、Baidu でページを検索したところ、ページが削除されていたため、当然 Baidu スナップシ...
前回の記事に引き続き、web02 サーバーを作成し、web01 サーバーと web02 サーバーの ...
まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...
MySQL でテーブルを削除するのは非常に簡単ですが、削除コマンドを実行するとすべてのデータが消えて...
あるウェブサイトでは、ユーザーが WebKit カーネルでページを開くことを期待して、HTML5 と...
目次序文1. ファイルのディスク使用量を確認する1.1 ディスク容量の使用状況を確認する1.2 ディ...
目次インデックスモデルB+ツリーインデックスの選択インデックスの最適化インデックスの選択性カバーイン...
この状況は通常、中国語言語パックがインストールされていないか、デフォルトの言語設定に問題があるために...
効果図: 全体的な効果: ビデオ読み込み中: 写真:ステップ1: HTML要素を作成するまず、HTM...
1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...