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

Editor to share with you an example analysis of the event cycle mechanism in JS, 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 learn about it!

1. JavaScript is single threaded

JavaScript is a single-threaded programming language with only one call stack, which determines that it can only do one thing at a time. When the code is executed, the execution context of different functions is pressed into the execution stack to ensure the orderly execution of the code. When executing synchronous code, if an asynchronous event is encountered, the js engine does not wait for the result to be returned, but suspends the event and continues to execute other tasks in the stack. Therefore, JS is a non-blocking, asynchronous, concurrent programming language.

2. Synchronous and asynchronous

The relationship between synchronous and asynchronous is similar to when we wait in line in a restaurant, everyone has to wait in line to buy food, and the process is very boring, when we can play with our mobile phones while waiting in line. It won't take long for us to buy food. This queuing process is a synchronous operation in JS, and playing with the phone is like an asynchronous operation. The difference between synchronous and asynchronous lies in the order in which the tasks of queuing up to buy meals and playing with mobile phones are performed.

Synchronization: refers to a task that is queued on the main thread and cannot be executed until the previous task has been executed. It can be understood as waiting for the system to return a value or message after executing a function or method, when the program is blocked and other commands are executed only after receiving the returned value or message.

Async: it means that an asynchronous task can be executed without entering the main thread. After the execution of the function or method, you do not have to wait for the return value or message obstructively, but only need to delegate an asynchronous process to the system, then when the system receives the return value or message, the system will automatically trigger the asynchronous process of the delegate. to complete a complete process.

Console.log (1); setTimeout () = > {console.log (2);}, 0); setTimeout () = > {console.log (3);}, 0); setTimeout () = > {console.log (4);}, 0); console.log (5)

The above code prints 1 "5" 2 "3" 4. Why does it produce such a result? let's take a look at the event loop.

3. Event cycle

The event loop process can be described simply as:

A, the function stacks, and when an asynchronous task is executed in Stack, it is thrown to WebAPIs, and then the synchronous task is executed until Stack is empty

In the meantime, WebAPIs completes the event and puts the callback function into the CallbackQueue (task queue) to wait

C. When the execution stack is empty, Event Loop puts a task in Callback Queue into Stack and goes back to step 1.

Event cycle (Event Loop) is the core mechanism that makes JavaScript single-threaded and absolutely non-blocking, and it is also the basis of the JavaScript concurrency model (Concurrency Model). It is a mechanism used to coordinate various events, user interaction, script execution, UI rendering, network requests, and so on. Event Loop maintains its own event queue when performing and coordinating various tasks.

An event queue is a queue that stores tasks to be executed, in which the tasks are executed in strict chronological order, the tasks at the head of the queue will be executed first, and the tasks at the end of the queue will be executed last. The event queue executes only one task at a time, and then executes the next task after the completion of the task. One task starts until it ends, and will not be interrupted by other tasks. The execution stack is a running container similar to the function call stack. When the execution stack is empty, the JS engine checks the event queue, and if it is not empty, the event queue pushes the first task into the execution stack to run.

Task queue: in JavaScript, asynchronous tasks are divided into two types, one kind of MacroTask is also called Task, and the other is called micro task:

There are many examples of macro tasks, including creating master document objects, parsing HTML, executing mainline (or global) JavaScript code, changing the current URL, and various events such as page loading, input, network events, and timer events. From a browser point of view, macro tasks represent discrete, independent units of work. After running the task, the browser can continue with other schedules, such as re-rendering the UI of the page or performing garbage collection.

Microtasks are smaller tasks. Microtasks update the status of the application, but must be performed before the browser task, which includes the UI for re-rendering the page, continues to perform other tasks. Examples of micro tasks include promise callback functions, DOM changes, and so on. Microtasks need to be executed asynchronously as quickly as possible without generating entirely new microtasks. Microtasks enable us to perform the specified behavior before re-rendering the UI, avoiding unnecessary UI redrawing, which makes the state of the application discontinuous.

When the events in the current execution stack are finished, the js engine will first determine whether there are any tasks in the micro-task queue, and if so, press the events at the head of the micro-task queue into the stack for execution. Judge the tasks in the macro task column after the micro task has been executed on the column. Each time the macro task is executed, it will determine whether the micro-task queue generates a new task, and if it exists, the micro-task will be executed first, otherwise the macro task will be executed in sequence.

An event loop usually requires at least two task queues: a macro task queue and a micro task queue. Both queues perform only one task at a time.

Console.log ("script start"); setTimeout (function () {console.log ("setTimeout");}, 0); Promise.resolve () .then (function () {console.log ("promise1");}) .then (function () {console.log ("promise2");}); console.log ("script end")

According to the above, analyze and implement the steps:

1. Macro task: execute the overall code (equivalent to the code in):

Output: script start

When you encounter setTimeout, join the macro task queue, the current macro task queue (setTimeout)

Encounters promise, joins micro task, current micro task queue (promise1)

Output: script end

2. Micro-task: execute micro-task queue (promise1)

Output: generate a micro task after promise1,then, join the micro task queue, the current micro task queue (promise2)

Execute then, output promise2

Perform the rendering operation to update the interface.

Macro tasks: performing setTimeout

Output: setTimeout

Note: new Promise (..) The code in, which is also synchronization code, is executed immediately. Only the code after then is the code executed asynchronously and is a micro task.

Console.log ("script start"); setTimeout (function () {console.log ("timeout1");}, 10); new Promise ((resolve) = > {console.log ("promise1"); resolve (); setTimeout (() = > console.log ("timeout2"), 10);}) .then (function () {console.log ("then1");}); console.log ("script end")

Step parsing:

Current task queue: micro task: [], macro task: []

Macro tasks:

Output: script start

When you encounter timeout1, join the macro task

When you encounter Promise, output promise1, directly resolve, add then to the micro task, encounter timeout2, and join the macro task.

Output script end

The macro task ends first.

Current task queue: micro task [then1], macro task [timeou1, timeout2]

Micro tasks:

Execute then1, output then1

Micro-task queue emptying

Current task queue: micro task [], macro task [timeou1, timeout2]

Macro tasks:

Output timeout1

Output timeout2

Current task queue: micro task [], macro task [timeou2]

Micro tasks:

Skip for null

Current task queue: micro task [], macro task [timeou2]

Macro tasks:

Output timeout2

Note: async and await are actually grammatical sugars for Generator and Promise. The async function is no different from an ordinary function, it just indicates that there is a method for asynchronous operation in this function and returns a Promise object

Async function async1 () {console.log ("async1 start"); await async2 (); console.log ("async1 end");} / / Promise write async function async1 () {console.log ("async1 start"); Promise.resolve (async2 ()). Then () = > console.log ("async1 end");}

The following is an example:

Async function async1 () {console.log ("async1 start"); await async2 (); console.log ("async1 end");} async function async2 () {console.log ("async2");} async1 (); setTimeout () = > {console.log ("timeout");}, 0); new Promise (function (resolve) {console.log ("promise1"); resolve ();}) .then () {console.log ("promise2");}) Console.log ("script end")

Step parsing:

Current task queue: macro task: [], micro task: []

Macro tasks:

Output: async1 start

When you encounter async2, output: async2, and add then (async1 end) to the micro task

When you encounter setTimeout, join the macro task.

If you encounter Promise, output: promise1, resolve directly, and add then (promise2) to the micro task

Output: script end

Current task queue: micro task [promise2, async1 end], macro task [timeout]

Micro tasks:

Output: promise2

Promise2 is out of the team.

Output: async1 end

Async1 end is out of the team.

Micro-task queue emptying

Current task queue: micro task [], macro task [timeout]

Macro tasks:

Output: timeout

Timeout is out of the team, the macro task is cleared.

The above is all the content of the article "example Analysis of event Loop Mechanism in JS". 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.