Detailed introduction to event loop (EventLoop) in node.js (with code)

This article brings you a detailed introduction to the event loop (EventLoop) in js (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Preface

Event loop

When the process starts, Node will create a tick loop. Each tick loop uses the internal observer to see if there are events that need to be processed, and if so, take them out. The event and its related callback function are executed. After execution, it enters the next loop. If there is no more, it exits the process.

Eventloop in the browser

  console.log('进程开始')
  const ajax = new XMLHttpRequest()
  ajax.addEventListener('load', () => {
    console.log('load')
  })
  ajax.addEventListener('loadend', () => {
    if (ajax.readyState == 4 && ajax.status == 200) {
      console.log('ajax success')
  　　　　} else {
      console.log('ajax success')
  　　　　}
  })
  ajax.open('get', 'http://localhost/study/html/vue.js')
  ajax.send()
  setTimeout(() => {
    console.log('setTimeout')
  }, 300)
  fetch('http://localhost/study/html/demo.json',{
    headers: {
      'content-type': 'application/json'
    }
  }).then(res => {
    console.log('fetch')
  })
  let i = 0
  while(i < 10000) {
    i++
  }
  console.log(i)
  console.log('进程结束')

It can be seen from the results that the three types of asynchronous processing do not block the execution of the main thread code, and ajax, fetch, and setTimeout execute callback functions according to the order in which the code processing ends.

Eventloop in Nodejs

setTimeout(() => {
  console.log('setTimeout')
}, 0)
setImmediate(() => {
  console.log('setImmediate1')
  process.nextTick(() => {
    console.log('setImmediate1 插入nextTick')
  })
})
setImmediate(() => {
  console.log('setImmediate2')
})
process.nextTick(() => {
  setTimeout(() => {
    console.log('nextTick1 setTimeout')
  }, 100)
  console.log('nextTick1')
})
process.nextTick(() => {
  console.log('nextTick2')
})
console.log('正常执行')