setTimeout and Promise of sequential execution | JavaScript MacroTask Queue (macro task queue) and MicroTask Queue (micro task queue)

Cause this is the thing, I blew a cow

and little brother really gave me a face questions! ! ! I found myself not! ! ! (╯¯Д¯) ╯╘═╛
But now the leak filled up. This article mainly related to macro and micro task queue task queue content of JavaScript, follow-up there is a chance I might tidy up the Asynchronous JavaScript?

---

First, let's think about what this code is output.

			const p = new Promise(function(resolve, reject) {
			    resolve();
			    setTimeout(() => {
			      console.log(1);
			    });
			    console.log(2);
			}).then(res => {
			    console.log(3);
			});
			console.log(4);

The answer is 2413

I am not very puzzled do not know why ah. JavaScript is not resolved down from you, how this order was so confused. This involves asynchronous problem.

Asynchronous execution order is kind of how it

js code block when parsing part will perform sequential synchronous, asynchronous section will be credited MacroTask Queue (macro task queue) and MicroTask Queue (micro task queue).

MacroTask Queue (macro task queue) include:

• setTimeout, setInterval, setImmediate, requestAnimationFrame, NodeJS中的I/O, UI渲染And so on.

MicroTask Queue (micro task queue) mainly include two categories:

• Independent callback Microtask: Promise.then catch finally, its success / failure callback function independent of each other;
• Composite callback Microtask: Object.observe(obsolete), MutationObserverand NodeJs中的 process.nextTick, in different states of the same callback function thereof;

JS main thread constant cycle of reading from the task queue task, perform tasks, which runs a mechanism called an event loop (event loop).

The process loops follows:

• Performing the synchronization code until finished (performed to resolve </script>tag);
• Check the queue MicroTask
  • If asynchronous tasks to be addressed, in order to perform all tasks asynchronously triggered until the implementation is complete, and then check the queue MacroTask
  • If asynchronous task not to be treated, the queue directly check MacroTask
• Check the queue MacroTask
  • If the trigger asynchronous tasks, then take the first MicroTask join the queue, processes it, and so forth, in order to perform all tasks continue until the end of execution.

---

After reading this on top. This problem will have resolved.
The figure below I have marked out.

• Synchronization code
  • promise to create it immediately.
  • Execution resolve ()
  • Encounter setTimeout, is not executed, the macro into the task queue
  • Met console.log (2), perform output 2
  • .then do not perform, into micro-tasks queue
  • Met console.log (4), output 4
• MicroTask queue:
  • The promise has .then, performing the console.log (3) Output 3
  • MicroTask empty queue, the queue check MacroTask
• MacroTask queue:
  • There setTimeout, put it in a queue MicroTask
  • Check the queue MicroTask
• MicroTask queue:
  • There setTimeout, execution console.log (1), an output
  • MicroTask empty queue, the queue check MacroTask
• MacroTask queue:
  • Queue is empty, the end of the event loop

---

I'm so tired