Event Loop

There are two types of events in Event Loop: macro-task and micro-task.

  • Macro tasks: Overall code Script, setTimeout, setInterval, setImmediate, I/O, UI Rendering

  • Microtasks: Promise.then, process.nextTick, MutationObserver

  • Perform macro tasks first, then micro tasks.

Task synchronization task and asynchronous tasks, synchronization task into the main thread, asynchronous tasks into the event table and register function, after completion of an asynchronous event, the callback function will be put into the event queue is different (macro and micro task queue), synchronous after completion of task execution, will read events from the event queue put main thread execution, The callback function may also contain different tasks, so the above operations are performed in a loop.

console.log('1');

setTimeout(function () {
  console.log('2');
  process.nextTick(function () {
    console.log('3');
  })
  new Promise(function (resolve) {
    console.log('4');
    resolve();
  }).then(function () {
    console.log('5')
  })
})
process.nextTick(function () {
  console.log('6');
})
new Promise(function (resolve) {
  console.log('7');
  resolve();
}).then(function () {
  console.log('8')})setTimeout(function () {
  console.log('9');
  process.nextTick(function () {
    console.log('10');
  })
  new Promise(function (resolve) {
    console.log('11');
    resolve();
  }).then(function () {
    console.log('12')})})Copy the code

  • What is single-threaded -> only one thing can be done at a time

  • Multithreading should consider a series of problems such as resource preemption, deadlock and conflict between threads

  • Single threading means that all tasks need to be queued until the first one is finished before the next one can be executed. If the first task takes a long time, the second task has to wait forever.

  • All tasks can be divided into two types, synchronous tasks and asynchronous tasks

  • A synchronization task refers to a task that is queued to be executed on the main thread. The next task can be executed only after the first task is completed.

  • An asynchronous task is a task that does not enter the main thread but enters the task queue. The task queue notifies the main thread that an asynchronous task is ready to execute.

  • All synchronous tasks are executed on the main thread, forming an execution context stack. (2) In addition to the main thread, there is a task queue. Whenever an asynchronous task has a result, an event is placed in the “task queue”. (3) Once all synchronization tasks in the “execution stack” are completed, the system reads the “task queue” to see what events are in it. Those corresponding asynchronous tasks then end the wait state, enter the execution stack, and start executing. (4) The main thread repeats step 3 above.

  • The order of execution of the above code:

    1. The whole script enters the main thread as the first macro task. When console is encountered, output 1.
    2. Hit setTimeout as a macro task and put it in the macro task queue. Remember to s1.
    3. Process is encountered as a microtask and entered into the microtask queue. Remember to p1.
    4. Execute immediately when you hit a new Promise, printing 7. Then is distributed to the microtask queue. For the t1.
    5. Hit setTimeout as a macro task and put it in the macro task queue. Remember to s2.

  • At this point, the first round of event loop macro tasks ends. The status of the task queue.

    1. Macro tasks: S1, s2.
    2. Microtasks: P1, T1.

  • Two microtasks were found, executing P1 and T1 in sequence. Output 6,8.

  • The first event loop ends. The remaining two macro tasks are S1, s2.

  • Start the second mission. Macro task.

    1. Perform s1.
    2. Execute immediately when you hit console, printing 2.
    3. Process is encountered as a microtask and placed in the microtask queue. Remember to p2.
    4. Execute immediately upon encountering a new Promise, printing 4. Then is distributed to the microtask queue. Remember to t2.

  • The second macro task is complete. Found microtask P2, T2. Output 3,5 in turn.

  • The second event loop ends. That leaves macro task S2.

  • Start the third round of missions. Macro task.

    1. S2.
    2. Execute immediately when you hit console, printing 9.
    3. Process is encountered as a microtask and placed in the microtask queue. Remember to p3.
    4. Execute immediately when you hit a new Promise, printing 11. Then is distributed to the microtask queue. Remember to t3.

  • The third macro task is complete. Discover microtasks P3, T3. Output 10, 12 in turn.

  • The main thread task queue has completed. The event loop ends.

  • The outputs are in order: 1,7,6,8,2,4,3,5,9,11,10,12.