Phases of eventloop explained with example.

phases.md

Phases of Node JS Event Loop Explained with examples

In this gist i will explain about the working of Phases in Event Loop, please refer below js file and run each example by uncommenting the code snippet one by one.

setImmediate(() => {
  console.log('set immediate 2')
})
setTimeout(() => {
  console.log('timeout 3')
})
process.nextTick(() => {
  console.log('next tick 4')
})
setTimeout(() => {
  console.log('timeout 5')
})
console.log('poll io 1')

// output :
// 1 as polling phase in queue is executed 1st
// 4 as nextTick queue is executed after every phase if there is any function which needs to be executed
// 3 as when the code came to timers phase this code was ready to be executed and hence it was executed
// 5 same with this
// 2 as you thought setImmediate is called first before setTimeout as it was in check phase, but reality is that setImmediate puts the code in queue to be executed in next loop of code

// setImmediate(() => {
//   console.log('set immediate 2')
// })
// setTimeout(() => {
//   console.log('timeout 3')
// }, 3)
// process.nextTick(() => {
//   console.log('next tick 4')
// })
// setTimeout(() => {
//   console.log('timeout 5')
// })
// console.log('poll io 1')

// // output :
// // 1 as polling phase in queue is executed 1st
// // 4 as nextTick queue is executed after every phase if there is any function which needs to be executed
// // 5 as when the code came to timers phase this code was ready to be executed and hence it was executed
// // 3 same with this but this time its on 2nd as it had 3ms timeout but still managed to finish before the code goes to next phase i.e close callbacks
// // 2 as you thought setImmediate is called first before setTimeout as it was in check phase, but reality is that setImmediate puts the code in queue to be executed in next loop of code

// setImmediate(() => {
//   console.log('set immediate 2')
// })
// setTimeout(() => {
//   console.log('timeout 3')
// }, 10)
// process.nextTick(() => {
//   console.log('next tick 4')
// })
// setTimeout(() => {
//   console.log('timeout 5')
// })
// console.log('poll io 1')

// // output :
// // 1 as polling phase in queue is executed 1st
// // 4 as nextTick queue is executed after every phase if there is any function which needs to be executed
// // 5 as when the code came to timers phase this code was ready to be executed and hence it was executed
// // 2 this time it executes before 3 bu after 5 as 2 was in check to be executed in seconf loop while during 1st loop 5 was ready to be executed in time and 3 was not yet finished with timeout
// // 3 this time due to 5ms timeout it is executed in next loop and as in next loop setImeediate is in check phase and ready to be executed

// setImmediate(() => {
//   console.log('set immediate 2')
// })
// setTimeout(() => {
//   console.log('timeout 5')
// })

// // output :
// // in this case depending on ur processor if during 1st loop ur timeoout is completed then it will execute 5 1st and then 2
// // but in 1st loop if timeout is not finished then it will print 2 first then 5

// setImmediate(() => {
//   console.log('set immediate 2')
// })
// setTimeout(() => {
//   console.log('timeout 5')
// }, 2)

// // output :
// // here always 2 will be printed first as 5 has 2 ms timeout and there are no code in poll phase so obviosly nothing will be executed in 1st loop,
// // while in second loop check has 2 to be executed and then by that time 5 is also ready then it will also be executed

// setImmediate(() => {
//   console.log('set immediate 2')
// })
// setTimeout(() => {
//   console.log('timeout 5')
// }, 2)
// console.log('1')

// // output:
// // 1 first as it is in poll queue
// // 5 second as it was ready to be executed in first loop only
// // 2 third as it was planned to be executed in next loop

// note :
// output may defer based on ur processor
// i ran this samples on intel i7 with 16gb ram
// but hope this clears ur event loop and its phases confusion

// ==================================== PHASES DIAGRAM =====================================

//             ┌───────────────────────────┐
//          ┌─>│           poll            │ ---> prints 1
//          │  └─────────────┬─────────────┘
//          │           nextTickQueue        ---> prints 4
//          │  ┌─────────────┴─────────────┐
//          │  │           check           │ ---> prints 2 (in second loop)
//          │  └─────────────┬─────────────┘
//          │           nextTickQueue
//          │  ┌─────────────┴─────────────┐
//          │  │       close callbacks     │
//          │  └─────────────┬─────────────┘
//   nextTickQueue      nextTickQueue
//          │  ┌─────────────┴─────────────┐
//          │  │           timers          │ ---> pritns 3 & 5 (only if timer is finished when code comes in this phase during loop for execution)
//          │  └─────────────┬─────────────┘
//          │           nextTickQueue
//          │  ┌─────────────┴─────────────┐
//          │  │     pending callbacks     │
//          │  └─────────────┬─────────────┘
//          │           nextTickQueue
//          │  ┌─────────────┴─────────────┐
//          └──┤        idle, prepare      │
//             └───────────────────────────┘

// nextTickQueue is executed after every phase if there is some function in there to be executed

Please comment below if u have any suggestions

Complex flow made easy to understand. Great Work 👍