JS summary of the event loop

JavaScript is single-threaded meaning JS engine in the implementation and interpretation of JS code, is done in a thread, and this thread is the so-called "main thread", but in fact when dealing with a number of other special operations , will be performed exclusively for opening up new threads, such as:

• Ajax request processing
• Handling DOM events
• Timer
• Read and write files
  , and so on, these are what we call "asynchronous" operation.
  When the code is running to them, they want to execute the code we will in this matter after the completion of registration, arrival time, and go trigger these registration functions.
  But when will we know which tasks should choose to do? This is the mechanism provided for in the event loop model JavaScript.

Mechanism introduced

The main thread of JavaScript execution engine generates a heap and a stack at run time.
Program code in order to enter the stack (last out).
When calling setTimeout () corresponding method, the browser kernel module starts listening trigger conditions occur.
If the trigger condition is reached, the callback method will be added to the task queue.
When the engine stack code is completed, the main thread will be to read the task queue, followed by the implementation to meet the callback function trigger condition.

Example 1

console.log('start');  // 入栈，执行出栈

//Timer1    入栈，出栈把回调函数放入timer模块
setTimeout(function(){
    console.log('hello');
},200);

//Timer2   同上
setTimeout(function(){
    console.log('world');
},100);

console.log('end'); // 入栈，执行出栈
// 执行栈已经被清空，这时候Timer模块检查异步代码
// 如果触发条件达成，回调函数加入任务队列
// Timer2早于Timer1被加入到任务队列中，主线程空闲，于是检查任务队列是否有可以执行的，以此循环检查。

Example 2

console.log(1);
//Time1
setTimeout(function(){
    console.log(2);
},300);
//Time2
setTimeout(function(){
    console.log(3)
},400);

// for循环所需时间长，此时前面两个回调函数都已在任务队列
for (var i = 0;i<10000;i++) {
    console.log(4);
}
//Time3
setTimeout(function(){
    console.log(5);
},100);

Macro and micro queue Queue

Task queue is divided into two categories, one is the macro queue, one is micro queue.
Macro queue in each event loop will only execute one extract,
micro queue will queue all tasks are extracted with the next extract further.
And micro queue task execution priority than the task of checking the macro queue.

for example

// （回调）加入微队列
process.nextTick(() => {
  console.log('nextTick')
})

// 加入宏队列
setTimeout(() => {
  console.log('setTimeout1')
})

// then回调加入微队列
Promise.resolve()
  .then(() => {
    console.log('then')
  })

// 加入宏队列
setTimeout(() => {
  console.log('setTimeout2')
})

// 主线程，先执行
console.log('end')

After the output end, the main stack is empty.
Checks micro queue is not empty, there are two already joined, all executed.
Look at the macro queue, although there are two, but this time it only to perform a.
And then a second round of circulation, only one task left macro queue.
So the result is:

end nextTick then setTimeout1 setTimeout2

PS: I had this part in the relevant summary Promise also had little summary, this time linked to deeper understanding.

Macro agent queue

• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame
• I / O
• UI rendering

Micro represents the queue

• process.nextTick
• Promises
• Object.observe
• MutationObserver