In-depth analysis of the event execution mechanism in JS

This article will give you an in-depth understanding of the event execution mechanism in JavaScript by analyzing the printing sequence of a piece of code. I hope it will be helpful to you!

Some time ago, I was a little confused by a written test question. Today we will thoroughly analyze the event execution mechanism of JS. [Related recommendations: javascript learning tutorial]

Look at a piece of code first

You guys can try to write out the printing order

##Single thread

JS is mainly used as a scripting language for the browser, the main purpose of Js It is to operate the DOM, which determines that JS must be single-threaded. If JS is multi-threaded like Java, if two threads operate the DOM at the same time, then how should the browser perform it? ?

The release of JS is actually to take advantage of the popularity of Java. The language was written not long ago, so this is why JS is single-threaded

JS Execution Mechanism

Since JS is single-threaded, tasks must be sorted. All tasks will be executed according to a rule.

• Synchronous tasks

• Asynchronous tasks

Synchronous tasks When tasks and asynchronous tasks enter the execution stack, JS will first determine the type of the task

• is a synchronous task, and directly enters the main thread

• is asynchronous Task, enter

  Event Table, register the callback function Event Queue

• When all synchronization tasks are executed, JS will

  Event QueueRead function execution in

• This process will be executed repeatedly until all tasks are completed. This is what we often call the

  event loop

How does JS determine that the execution stack is empty

emmmm, I don’t know . . . . JS should have its own unique logic to determine whether the execution stack is empty.

Asynchronous tasks

The execution sequence of asynchronous tasks is: Macro task——>Micro task

Asynchronous tasks can be divided into

• Macro tasks

• Micro tasks

##Common macro tasks

I/0
setTimeout

• ##setInterval
Common microtasks

Promise

• .then

• .catch

• Answer

vite There are some issues with a plug-in that I configured before. Please ignore this red alarm

Analysis

Started
• is a synchronous task, which enters the execution stack first
  execute
task( )
• function,

  a is a synchronous task, enters the execution stack

  async/await is the process of asynchronous to synchronous, the first line of code will be executed synchronously , the following code will be asynchronous.
b
• Enters the execution stack as a synchronous task

a end
• Becomes a microtask of an asynchronous task and enters the execution stack,

So far, the synchronization task queue is

Started

, a, bSo far, the asynchronous task queue is macro task:

setTimeout

Micro task: a endIf there is no subsequent code, The printing sequence is as follows

Then the question is, doesn’t it mean that macro tasks will be executed earlier than micro tasks? Why is setTimeout

printed in

a endWhat happens after? Look at this picture

setTimeout enters the task queue as a macro task. So this is the reason

In layman's terms:

async await leads to the generation of micro tasks, but this micro task belongs to the current macro task. Therefore,

a end

will be executed first, and after execution, it will be judged that the current macro task has ended. Execute the next macro task and print out

setTimeout and continue the process

c
• Because The transformation of Promise turns into a synchronization task and enters the task queue

c end
• Enters the task queue as a micro-task derived from Promise

d
• Enter the task queue as a synchronization task

So far, sync task queue

• a

• b

• c

• d

Async task queue so far

• a end microtask

• c end microtask

• setTimeout macrotask

So the printing order is as follows

Postscript

My own understanding of the JS execution mechanism may be somewhat incorrect, I hope you guys can point it out.

[Related video tutorial recommendations: web front-end]

The above is the detailed content of In-depth analysis of the event execution mechanism in JS. For more information, please follow other related articles on the PHP Chinese website!