What is the EventLoop?

Event loop is a running mechanism in computer systems, and JavaScript uses this mechanism to solve some problems caused by single thread running. Understanding this will make it clear how JS is executed.

MacroTask

  • setTimeout
  • setInterval
  • I/O
  • The script code block
  • SetImmediate (Not supported by IE10)
  • UI Rendering

Microtasks

  • nextTick
  • callback
  • Promise
  • process.nextTick
  • Object. Observe (waste)
  • MutationObserver

Eventloop Performs the step

  1. Execute global Script synchronization code, some of which are synchronous statements, some of which are asynchronous statements (setTimeout, etc.)
  2. After executing the global Script code, the call Stack clears
  3. Remove the callback task at the top of the microTask queue and put it into the call Stack for execution. After execution, the length of the MicroTask queue is reduced by 1
  4. Continue fetching the task at the top of the queue, place it on the call Stack, and so on until all the tasks in the MicroTask Queue have been executed. Note that if a microtask is created in the process of executing it, it is added to the end of the queue and executed during the cycle
  5. When all tasks in the MicroTask Queue are completed, the MicroTask Queue is empty and the call Stack is empty
  6. Remove the task at the head of the macroTask queue and place it in the Stack
  7. After the execution, the call Stack is empty
  8. Repeat steps 3-7

A simple generalization is that the code executes sequentially, when it encounters a microtask, it enters a microqueue, when it encounters a macro task, it enters a macro queue. After the synchronization code is executed, all tasks in the microqueue are executed first, and the microtasks encountered during the execution of the microqueue are put into the tail of the queue and executed together this time. After the execution of the microqueue, the tasks in the head of the macro queue will be executed. After the execution, the tasks in the microqueue will be executed. After the execution, all the microtasks will be executed

Example 1


console.log(1)

setTimeout(() = > {
  console.log(2)
  Promise.resolve().then(() = > {
    console.log(3)})},0)

new Promise((resolve, reject) = > {
  console.log(4)
  resolve(5)
}).then((res) = > {
  console.log(res)
})

setTimeout(() = > {
  console.log(6)},0)

console.log(7)
// Output result 1 4 7 5 2 3 6

Copy the code

Example 2

Promise.resolve().then(() = > {
  console.log('mm')
  Promise.resolve().then(() = > {
    console.log('xx')
  }).then(() = > {
    console.log('yy')
  })
}).then(() = > {
  console.log('nn')})Mm xx nn yy

Copy the code

Did you guess the output of this code correctly? Let’s analyze it again:

  1. First of all, there is only one big promise in the code, execute first, mm directly output, promise into the micro queue, internal execution completed
  2. And then the outer layer then goes into the micro queue
  3. Execute microqueue, output xx, hit inside. Then join queue end
  4. Output nn
  5. Output yy

Here are the rules for chain calls to Promise

  • If the earlier promise is resolved, the callback will be pushed to the microtask queue immediately (but not until all synchronization tasks have finished)
  • If the previous promise is pending, the callback is stored inside the promise and pushed into the microtask queue until the promise is resolved
Reference:

Promise chain call sequence triggered by thinking

Understand Event Loop in a minute