Javascript 的 Event loop 理解

Javascript 的 Event loop 理解

首先先理解Event loop到底是个什么东西，都知道JavaScript是一个单线程的语言，至于为什么是单线程语言呢，简单的说JavaScript本来就是一个脚本语言没有必要做成多线程的。但是单线程的话就会碰到一些问题 例如 在涉及文件读取的时候就会变成这样

之间的红色部分就是等待的时间这段时间内浏览器什么也做不了，这样的话就很浪费，给人的体验就是很卡。然后呢Event Loop 就被提出来了，可以理解为把JavaScript的单线程分为一个主线程和一个Event loop线程来处理主线程和其他进程的通信。

分析

在JavaScript里面任务被分成两种宏任务和微任务
宏任务（Macrotask）：如script全部代码、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）、I/O、UI Rendering。
微任务（Microtask）： Process.nextTick（Node独有）、Promise…

JavaScript单线程任务又分为同步任务和异步任务。同步任务会在调用栈中按照顺序等待主线程依次执行，异步任务会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。
注：前面说JavaScript任务分为宏任务和微任务 后面又说分为同步任务和异步任务其实只是分类的依据不同，就好像人有好人和坏人之分也可以分为男人和女人，刚开始的时候我也有点乱后来看多了就知道了

运行机制

1.先读任务队列，最先进的任务出列进入执行栈
2.执行栈，执行完出栈
3.检查微任务队列是否为空，空则去任务队列取任务，非空则运行完所有的微任务。
我总结的呢主要就这三步，然后上代码

console.log('1')

function add(x, y) {
    console.log(2)
    setTimeout(function() { // timer1
        console.log(13)
    }, 1000)
}
add();

async function async1() {
    await async2()
    console.log('7')
}
async function async2() {
    console.log('3')
}

async1()

setTimeout(function() { // timer2
    console.log(10)
})

new Promise(function() {
    console.log(4)
    setTimeout(function() { // timer3
            console.log(12)
        }, 100)
    })

})

setTimeout(function() {     //time4
    console.log('11')
}, 0)

new Promise(resolve => {
    console.log('5')
    resolve()
})
    .then(function() {
        console.log('8')
    })
    .then(function() {
        console.log('9')
    })

console.log(6)

运行结果

1 2 3 4 5 6 7 8 9 10 11 12 13

结果分析
1.打印1，因为console是一个同步函数直接执行
2.运行add函数，打印了2，之后碰到了Time1，进入宏任务队列，然后继续向下运行。
3.然后async1函数进入执行栈，因为async1函数是由async修饰的所以是promise对象，里面碰到await 之后便把async2放进微任务列，在执行栈完了之后进入微任务队列运行了async2函数打印了y一个3，此时程序并不会回到async1那里，因为JavaScript是单线程的，async已经退出去了便不会再进去了。按照Event Loop循环现在应该进入任务队列取任务。
4.运行到Time2进入宏队列，此时的宏队列里面有两个了一个是console（13），应该是console（10）。
5.下面遇到一个promise因为promise在实例化的时候便会运行一次，所以打印了一个4.继续把Time3放进宏队列。
6.接下来碰到Time4进入宏队列
7.promise 打印一个5，之后进入微队列。
8.打印6之后，进入微队列打印之前的7，8之后碰到一个。then又放进微队列打印9，执行完之后，任务队列已经空了，然后执行宏任务，time1，time2，time3，time4.但是time是等1秒执行的所以最后打印出来。
9.所以最后的结果是1，2，3，4，5，6，7，8，9，10，11，12，13。