A flowchart

  1. Js code is divided into synchronous tasks and asynchronous tasks.
  2. Synchronous tasks enter the main thread and asynchronous tasks enter the Event Table. When the asynchronous tasks in the Event Table are completed, callback functions are registered in the Event Queue.
  3. Tasks in the Event Queue are completed only after the main thread tasks are complete.
  4. The js parser repeatedly checks to see if the main thread execution stack is empty, and then repeats step 3, which is the Event Loop.

The types of JS code are:

Pay attention to

  1. Tasks can be further divided into macro tasks and micro tasks, which have a more detailed impact on the execution of JS code, which will be explained in the following article.
  2. Macro tasks and micro tasks in asynchronous tasks will enter different Event queues, that is, Event queues can be divided into macro task queues and micro task queues.
  3. SetInterval will repeatedly register callback functions in the Event Queue at the setInterval. If the main thread code is executed for too long in a certain period of time, setInterval’s callback functions may block together and fail to maintain the setInterval. If setInterval is used for animation, It is represented by Catton.

Detailed process

In fact, there is a more detailed operation process in the event cycle (main thread → event queue), namely, the cycle between (macro task → micro task), as shown in the figure below:

  • The first event loop:
  1. The main thread executes the entire JS code (macro tasks), registers callback functions such as Ajax, setTimeout and Promise to the Event Queue, and distinguishes macro tasks from microtasks.
  2. The main thread extracts and executes all the microtasks in the Event Queue, such as Ajax and Promise, and registers the asynchronous tasks in the microtasks to the Event Queue.
  • The second event cycle:
  1. The main thread extracts the first macro task (usually setTimeout) in the Event Queue.
  2. The main thread performs the setTimeout macro task and registers the asynchronous tasks in the setTimeout code to the Event Queue (if any).
  3. Execute all microtasks in the Event Queue and register asynchronous tasks from the microtasks to the Event Queue (if any).
  • A similar loop: emptying the event queue of microtasks each time a macro task completes execution.

Note: the event queue points “macro task queue” and “micro task queue”, each performs a task may register new micro macro task or tasks to the corresponding task queue, as long as you follow the “each a macro mission, will clear all the micro in an event queue task” rules of the cycle, will not disturb.

The instance

Example 1

console.log('1'); // 1 6 7 2 4 5 9 10 11 8 3set1
setTimeout(function () {
    console.log('2');
    // set4
    setTimeout(function() {
        console.log('3');
    });
    // pro2
    new Promise(function (resolve) {
        console.log('4');
        resolve();
    }).then(function () {
        console.log('5'// pro1 new Promise()function (resolve) {
    console.log('6');
    resolve();
}).then(function () {
    console.log('7');
    // set3
    setTimeout(function() {
        console.log('8'); }); / / as})set2
setTimeout(function () {
    console.log('9'); // call pro3 new Promise(function (resolve) {
        console.log('10');
        resolve();
    }).then(function () {
        console.log('11'); })})Copy the code
  • The first event loop:
  1. The whole script enters the main thread as the first macro task, encounters console.log, and prints 1.

  • The second event cycle:
  1. The main thread executes the first macro task in the queue, set1, with output 2; Set4 encountered in code, register callback; When pro2 is encountered, new Promise () executes output 4 directly and registers the callback;

  • The third cycle of events
  1. The main thread executes the first macro task in the queue, set2, with output 9; When pro3 is encountered, new Promise () prints 10 and registers a callback;
  2. After the set2 macro task is executed, the microtask starts. The main thread executes the microtask pro3 and outputs 11.
  • Like a cycle…

So the final output is 1, 6, 7, 2, 4, 5, 9, 10, 11, 8, 3.