Event Loop 执行机制详解

概述

JavaScript 是一个单线程语言，也就是说所有的任务必须一个一个排队执行，
但是如果一个任务执行时间过长，便会阻塞后面的任务执行，
因此需要将耗时时间长的任务作为异步任务来处理，以防止主线程阻塞，
于是便有了 Event Loop 这个 执行机制

js具体执行过程:

当执行到 setTimeout(fn , 1000) 或 setTimeout(fn , 0) 时，它会被放入 Event Table 中注册回调函数，再经过 1000ms 或 0毫秒时（实际最小延迟为4ms），回调函数被放入 Event Queue ,记住只有当主线程中的任务全部执行结束之后，才会去读取 Event Queue 中的回调结果，并放入到主线程中去执行

宏任务和微任务

异步任务还有更细分的定义：

• 宏任务: 代码块，setImmediate, setTimeout, setInterval, I/O, UI交互事件
• 微任务: Promise, progress.nextTick MutaionObserver

另外 new Primise() 会立即调用里面的回调函数，应该属于同步任务

Event Queue中对于所有任务的执行循序是:

1. 先执行代码块（主程序中的任务，个人理解是先执行所有的同步任务）；
2. 然后开始执行队列中所有的微任务，
3. 然后再次执行下一个宏任务，
4. 然后重复第2步，直至任务队列为空

console.log('1');

// setTimeout1
setTimeout(function() {
   
   console.log('2');
   // promise1
   new Promise(function(resolve) {
   
       console.log('3');
       resolve();
   }).then(function() {
   
       console.log('4')
   })
})
// promise
new Promise(function(resolve) {
   
   console.log('5');
   resolve();
}).then(function() {
   
   console.log('6')
})

// setTimeout2
setTimeout(function() {
   
   console.log('7');
   // promise2
   new Promise(function(resolve) {
   </