javascript事件の環の小さい任務とマクロの任務の隊列の原理を話します。

JS事件ループ
JSプログラムの実行はイベントループのメカニズムから切り離せません。このメカニズムは何かが発生した時に、事前に予約した関数を実行する機会があることを保証します。JSは対応する関数をスタックに入れて実行してからスタックを出します。しかし、イベントリングに関してはまだ未知のものがあります。例えば、setsTimeoutは彼をタイマーと呼びます。しかし、多くの人が意識していないかもしれません。これは私たちがよく使うイベントとあまり変わりません。ただ、私たちが通常言っているイベントの多くはユーザーに触発されます。setTimeoutはユーザー自身で触発されるのではなく、指定された時間の後にトリガされます。問題が来ました。もし時間を0に設定すれば、何が起こりますか？すぐ実行しますか？
setTimeout、DOMまたはHTTP要求のこの部分は実はv 8エンジンではありません。これらはウェブAPIに属しています。javascriptは単一スレッドの言語です。つまり一回に一つのことしかできないということです。この事実は変わりません。
原理を実行する
JSでは、すべての方法がスタックに押し込まれて実行され、実行が完了してポップアップされます。非同期コードが発生した場合、例えばsetTimeout MuttionObserver Promise非同期の部分は他のwebAPIを管理するところで実行されます。など、非同期の結果があると、コールバック関数は対応するキューに入ります。setTimeout setInterval request Animation Frameはマクロタスクの行列に入ります。メインスレッドの実行スタックが空きました。タスクキューはすぐにスタックに押し込まれて実行され、実行が完了したらマクロタスクキューの実行を開始します。

一つの経典の例
html

<div class="outer">
 <div class="inner"></div>
</div>

js。

// Let's get hold of those elements
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');

// Let's listen for attribute changes on the
// outer element
new MutationObserver(function () {
 console.log('mutate');
}).observe(outer, {
 attributes: true,
});

// Here's a click listener…
function onClick() {
 console.log('click');

 setTimeout(function () {
  console.log('timeout');
 }, 0);

 Promise.resolve().then(function () {
  console.log('promise');
 });

 outer.setAttribute('data-random', Math.random());
}

// …which we'll attach to both elements
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

以上のコードは、 inner 要素を手動でクリックした場合、以下のように出力されます。
click
プロミス
mutate
click
プロミス
mutate
タイムアウト
タイムアウト
2020年8月までにchrome edge opera firefoxの結果は統一されていますが、これまでのバージョンでは異なる出力があります。
奇妙な現象
上記のコードは手動トリガではなく、inner.clickを使ってクリックします。その結果は大きく違っています。
click
click
プロミス
mutate
プロミス
タイムアウト
タイムアウト
このような大きな違いをもたらしたのは、手動クリックは、関数がスタックに入ることによって、クリックイベントのフィードバックをトリガするのではないため、innerのコールバックが実行されたメインスレッドの実行スタックは空であり、直接キューの中のタスクを実行し、その後、イベントの泡が発生した場合のコールバック関数はスタックに入れられて実行されるためである。clickメソッドのクリックは、clickをスタックに押し入れて実行することによって達成され、innerのクリック・コールが完了した後、click方法はスタックにイジェクトされず、直接泡の次のフィードバックを実行します。次のフィードバックには重複属性設定があります。これはMuttionObserverを繰り返すことができないので、mutteの出力は一つしかありません。すべての泡立ちバックが実行されたら、click関数がポップアップスタックになります。
最後に、ブラウザはできるだけ敏感な操作をしておきます。
以上はjavascript事件の環の小さい任務とマクロの任務の隊列の原理の詳しい内容を話して、更に多くJavaScript事件の環の資料に関して私達のその他の関連している文章に関心を持って下さい！