This is the first article I participated in beginners’ introduction

Event cycle concept

JavaScript Event loops are JavaScript execution mechanisms. It is divided into browser event loop and Node event loop. This article discusses the browser event loop mechanism.

The role of the event loop

Before we get into event loops, let’s start with JavaScript itself. JavaScript is a single-threaded language.

Single thread

Single thread in program execution, the path of the program in sequential order, the first must be processed before the next can be executed.

See this some friends will ask, that if there is a program execution, the front of the task is too slow, then the back of the task has to wait?? Do not start the next task until the previous task is completed.

This is where the JavaScript event loop comes in.

Implementation of the event loop

As shown in the figure, tasks in a JavaScript single thread are judged to be synchronous and asynchronous when they enter the execution stack. If the task is synchronous, it will be queued to the main thread. If the task is asynchronous, it will enter the Event Table and register the function. When the specified task is completed, the Event Table will move the function to the Event Queue. When the task execution in the main thread is empty, the Event Queue will read the corresponding function and enter the main thread to execute. This process continues in a loop called an event loop.

Synchronous and asynchronous

Synchronization: Once a synchronous method call has started, the caller must wait until the method call returns before continuing with the subsequent behavior.

Asynchronous: An asynchronous method call is more like a message passing; once started, the method call is returned immediately and the caller can continue with subsequent operations. Js common asynchronous tasks include:

Web request (Ajax)

Events trigger (onclick | onchange etc.)

Timing function (setTimeout | setInterval)

The callback function

Macro-task, micro-task

In addition to synchronous and asynchronous tasks in the broad sense, tasks in JavaScript single threads can be subdivided into macro tasks and micro tasks.

Macro-task includes: Script (overall code), setTimeout, setInterval, setImmediate, I/O, AND UI Rendering.

Micro-tasks include: Process. NextTick, Promises, Object. Observe, MutationObserver.

In the first event loop, the JavaScript engine will execute the entire script code as a macro task. After the execution is completed, it will detect whether the microtask is found in this cycle. If so, it will read and execute all the microtasks from the task queue of the microtask in turn, and then read the task execution in the task queue of the macro task. Perform all the microtasks, and so on. The sequence of JS execution is macro – micro – task in each event loop.

Take a chestnut

console.log(1);
setTimeout(function() {
    console.log(2);
})
var promise = new Promise(function(resolve, reject) {
    console.log(3);
    resolve();
})
promise.then(function() {
    console.log(4);
})
console.log(5);
Copy the code

For the first event loop, the entire code is executed as a macro task on the main thread.

When a setTimeout is encountered, the callback function is placed in the macro task’s task queue after the specified time has elapsed.

When a Promise is encountered, the then function is placed in the task queue of the microtask.

After the completion of the whole event cycle, detect whether there is a task in the task queue of the microtask, and execute it if there is. The result of the first loop is printed as: 1,3,5,4.

The macro task in this loop is the callback function registered by setTimeout. After executing this callback function, it is found that there is no microtask in this loop, and it is ready to carry out the next event loop.

There are no more tasks to execute in the macro task queue, so end the event loop.

The result is 1,3,5,4,2