回答編集履歴
2
typo
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
「promise、`await`」と「`setTimeout`」は異なる挙動をします。なぜならそれぞれ異なるキューが用意されていて、実行のされ方も異なるからです。
|
|
4
4
|
|
|
5
|
-
非同期に呼び出される関数が蓄えられるキューは2種類あり、task queue と microtask queue です。promise のコールバックと [MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver) のコールバックは microtask queue に入れられ、それ以外の非同期なコールバック(`setTimeout` など)はすべて task queue に入れられます。(queue に入れられるタイミングはコールバックがセットされたタイミングではなくて、呼び出されほしい、という時です。例えば
|
|
5
|
+
非同期に呼び出される関数が蓄えられるキューは2種類あり、task queue と microtask queue です。promise のコールバックと [MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver) のコールバックは microtask queue に入れられ、それ以外の非同期なコールバック(`setTimeout` など)はすべて task queue に入れられます。(queue に入れられるタイミングはコールバックがセットされたタイミングではなくて、呼び出されほしい、という時です。例えば Promise ならそれが resolve や reject したタイミングです)。
|
|
6
6
|
|
|
7
7
|
注意: `requestAnimationFrame()`のコールバックは[別のタイミング](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model:run-the-animation-frame-callbacks-2)で実行されます。
|
|
8
8
|
|
1
修正
answer
CHANGED
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
非同期に呼び出される関数が蓄えられるキューは2種類あり、task queue と microtask queue です。promise のコールバックと [MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver) のコールバックは microtask queue に入れられ、それ以外の非同期なコールバック(`setTimeout` など)はすべて task queue に入れられます。(queue に入れられるタイミングはコールバックがセットされたタイミングではなくて、呼び出されほしい、という時です。例えば Promies ならそれが resolve や reject したタイミングです)。
|
|
6
6
|
|
|
7
|
-
注意: `requestAnimationFrame()`のコールバックは[別の
|
|
7
|
+
注意: `requestAnimationFrame()`のコールバックは[別のタイミング](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model:run-the-animation-frame-callbacks-2)で実行されます。
|
|
8
8
|
|
|
9
|
-
あまり細かいことは自分も分かっていませんが、基本的にコールスタックが空になるとすぐに [microtask checkpoint](https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint) というのが実行されて、microtask queue に溜まっている microtask が古い順に**すべて実行されます**。もしその microtask が(例えば `Promise.resolve` などで)即座に別の microtask をエンキューしたとしても、それも含めて microtask queue が空になるまで実行されます。
|
|
9
|
+
あまり細かいことは自分も分かっていませんが、基本的にコールスタックが空になるとすぐに [microtask checkpoint](https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint) というのが実行されて、microtask queue に溜まっている microtask が古い順に**すべて実行されます**。もしその microtask が(例えば `Promise.resolve().then(...)` などで)即座に別の microtask をエンキューしたとしても、それも含めて microtask queue が空になるまで実行されます。
|
|
10
10
|
|
|
11
11
|
一方、task は**一つづつしか実行されません**。task queue から一番古い task が一つ取り出され、それを実行し終わるとすぐに microtask checkpoint が実行され、そのあと画面のレンダリングが行われ(行われないこともある)、これが繰り返されます。
|
|
12
12
|
|
|
@@ -46,4 +46,4 @@
|
|
|
46
46
|
|
|
47
47
|
[DEMO(JSFiddle)](https://jsfiddle.net/karamarimo/sd1gkp7v/)
|
|
48
48
|
|
|
49
|
-
`await` する値が promise でなくともそれ以降の処理は microtask となり、振る舞いとしては `Promise.resolve()` と同等であることが分かると思います。また、microtask が task より前に実行されていることも観察できます。microtask `promise3` は task `setTimeout1`
|
|
49
|
+
`await` する値が promise でなくともそれ以降の処理は microtask となり、振る舞いとしては `Promise.resolve()` と同等であることが分かると思います。また、microtask が task より前に実行されていることも観察できます。microtask `promise3` は task `setTimeout1` が終了した直後かつ、task `setTimeout2` より前に実行されています。
|