We all know that javascript is single-threaded, so the question is, how do you do it asynchronously?

We think of a single thread as something like this, one in a row, executing synchronously.

In real life, JS looks like this

        setTimeout(function() {
            console.log(1);
        });
        new Promise(function(resolve, reject) {
            console.log(2)
            resolve(3)
        }).then(function(val) { console.log(val); }) console.log(4) // The results are 2, 4, 3, 1Copy the code

The result tells us that JS is single-threaded, but not executed line by line synchronously.

So let’s figure out if there’s asynchrony, what’s the order? These execution order rules are the key to understanding eventLoop, moving on.

Above is my recording of the execution order of chrome control console. Although we can see the execution order, we are still confused. We do not know the rules, so we have to ask.

Search a lot of official, personal blog got a bunch of words: JS engine, main thread, event list, event queue, macro task, micro task, completely confused…

Take it one at a time. Let’s get to the bottom of it

Js engine

In conclusion, a word is to parse the optimized code ** to make the implementation rules

The main thread

Summary a sentence to perform JS engine optimization and sequence the code

Event Table

During code execution, asynchronous callbacks, such as setTimeout, Ajax callbacks, register callback events to the Event Table

The event queue

When the event callback ends, the Event table moves the event to the Event Queue.

# macrotasks and microtasks

Events contained in a macro task

Events that microtasks contain

Many blogs say that the browser executes tasks sequentially from the task queue, checks whether the microTask queue is empty after each task is executed, and executes all microtasks at once if not. It then enters the next loop to fetch the next task from the task queue

To be honest, I do not understand, so I will learn and understand in my own way

Let’s look at the code for a better understanding

        console.log('1');
        setTimeout(function() {
            console.log('2');
            new Promise(function(resolve) {
                console.log('3');
                resolve();
            }).then(function() {
                console.log('4')
            })
        })
        new Promise(function(resolve) {
            console.log('5');
            resolve();
        }).then(function() {
            console.log('6')})setTimeout(function() {
            console.log('7');
            new Promise(function(resolve) {
                console.log('8');
                resolve();
            }).then(function() {
                console.log('9'})}) // Results: 1, 5, 6, 2, 3, 4, 7, 8, 9Copy the code

First of all, the JS engine distinguishes between direct execution (synchronous code) and asynchronous code execution. If it is asynchronous, it distinguishes between macro task and micro task and puts them into two task queues respectively and starts execution. After each macro task is executed, it scans the micro task queue and executes all of them, forming an eventLoop. This rule is repeated over and over again and this is the loop of events that we hear.

I would like to add that js engine can understand the whole script as a macro task at the beginning, so that it is easier to understand the script macro task in the beginning, and then the macro task contains synchronous code and asynchronous code (macro task and micro task), which are executed in sequence to form eventLoop.

Welcome to make fun of like comments!

The article reference learning: www.jianshu.com/p/12b9f73c5… Juejin. Cn/post / 684490… Segmentfault.com/a/119000001…