Shulou(Shulou.com)06/01 Report--

Editor to share with you the example analysis of the event execution mechanism in javascript, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Look at a piece of code first.

Friends, you can try to write down the printing order.

Single thread

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

JS is actually released for the popularity of Java, in which the language has not been written for a long time, so that's why JS is single-threaded.

JS execution mechanism

Since JS is single-threaded, it is bound to sort the tasks. All tasks will be carried out according to one rule.

Synchronization task

Asynchronous task

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

Is a synchronization task that goes directly to the main thread

It is an asynchronous task. Enter Event Table and register the callback function Event Queue.

When all the synchronization tasks are finished, JS will read the function execution in Event Queue.

This process is repeated until the completion of all tasks. This is what we often call the event cycle.

How does JS determine that the execution stack is empty

Emmmm, I don't know. JS should have its own set of logic to determine whether the execution stack is empty.

Asynchronous task

The order of asynchronous tasks is: macro tasks-- > micro tasks.

Asynchronous tasks can be divided into

Macro task

Micro task

Common macro tasks

I/0

SetTimeout

SetInterval

Common micro-tasks

Promise

.then

.catch

Answer

There is something wrong with the version of a plug-in configured before vite. Don't worry about the red alarm.

Analysis.

It starts as a synchronization task, which is the first to enter the execution stack.

Execute the task () function, where an is a synchronous task and enters the execution stack

Async/await is the process of transferring from asynchronism to synchronization. The first line of code will be executed synchronously, and the following code will be asynchronous. B enters the execution stack as a synchronization task

An end becomes the microtask of asynchronous tasks and enters the execution stack

So far, the synchronization task queue starts in turn, a, b

So far, the asynchronous task queue is the macro task in turn: setTimeout micro task: an end

If there is no subsequent code, the printing order is as follows

So the question is, doesn't it mean that macro tasks are executed earlier than micro tasks? why does setTimeout print after an end?

Look at this picture.

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

In popular terms:

Async await leads to the creation of microtasks, but this microtask belongs to the current macro task. Therefore, an end will be executed first, and the completion of the execution will determine the end of the current macro task. Execute the next macro task and print out the setTimeout

Continue to follow the process

C due to the transformation of Promise, it becomes a synchronous task and enters the task queue

C end enters the task queue as a microtask derived from Promise.

D enter the task queue as a synchronization task

So far, synchronize the task queue

A

B

C

D

So far, asynchronous task queues

An end micro task

C end micro task

SetTimeout Macro Task

So the printing order is as follows

The above is all the content of the article "example Analysis of event execution Mechanism in javascript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.