JS之EventLoop

EventLoop

作为一个前端er，必须知道的技能之一~由于我之前时候做Android开发的，特此记录下。

js是单线程的，那如何协调事件（event），用户交互（user interaction），脚本（script），渲染（rendering），网络（networking）等，用户代理（user agent）等等呢~此时就需要用到EventLoop——事件循环。

JS有个任务队列的概念：

macrotask（宏任务）：script(整体代码), XHR回调、事件回调（鼠标键盘事件）setTimeout, setInterval, setImmediate（node独有）, I/O, UI rendering

microtask（微任务）：process.nextTick（node独有）, Promises.then, Object.observe(废弃), MutationObserver

new Promise 属于主线程(外层宏) 但是Promises.then 是微任务！！

详细步骤：
1.选择当前要执行的宏任务队列，选择一个最先进入任务队列的宏任务，如果没有宏任务可以选择，则会跳转至microtask的执行步骤。
2.将事件循环的当前运行宏任务设置为已选择的宏任务。
3.运行宏任务。
4.将事件循环的当前运行任务设置为null。
5.将运行完的宏任务从宏任务队列中移除。
6.microtasks步骤：进入microtask检查点。
7.更新界面渲染。
8.返回第一步。

只要主线程空了，就会读取任务列队，这就是 js 的运行机制，也被称为 event loop（事件循环）。
需要注意的一点是：在同一个上下文中，总的执行顺序为同步代码—>microTask—>macroTask

下面看代码：

console.log("start")
setTimeout(()=>{
    console.log('timer1')
    new Promise(function(resolve){
     console.log(" promise start ")
      resolve();
}).then(function() {
        console.log('promise1')
    })
}, 0)

setTimeout(()=>{
    console.log('timer2')
    Promise.resolve().then(function() {
        console.log('promise2')
    })
}, 0)
console.log("end")

浏览器输出：
start
end
time1
promise start
promise1
time2
promise2

首先先执行同步任务，先打印start,
执行到第一个setTimeout属于宏任务 所以挂起放到宏任务，遇到第二个setTimeout也是挂起放到宏任务,
接着打印end，同步任务执行完成->JS执行栈为空->去查找微任务：微任务为空，接着查找宏任务，
执行第一个宏任务setTimeout 打印timer1，接着执行newPromise，输出 promise start ，再接着Promise.then属于微任务，挂起放到微任务中。
宏任务执行完成->JS执行栈为空>去查找微任务：微任务里有任务，一次执行完，输出promise1。
后面接着循环去查找宏任务~。
换一种方式：

console.log("start")
setTimeout(()=>{
    console.log('timer1')
    
}, 0)

new Promise(function(resolve){
     console.log(" promise start ")  //主线程(外层宏)
      resolve();
}).then(function() {
        console.log('promise1')；//这里是微任务
    })

setTimeout(()=>{
    console.log('timer2')
    Promise.resolve().then(function() {
        console.log('promise2')
    })
}, 0)
console.log("end")

浏览器输出：
start
promise start
end
promise1
timer1
time2
promise2

console.log('1');
setTimeout(function() {
    console.log('3');
    new Promise(function(resolve) {
        console.log('3.1');
        resolve();
    }).then(function() {
        console.log('4')
    })
})

new Promise(function(resolve) {
    console.log('1.1');
    resolve();
}).then(function() {
    console.log('2')
})

setTimeout(function() {
    console.log('5');
    new Promise(function(resolve) {
        console.log('5.1');
        resolve();
    }).then(function() {
        console.log('6')
    })
})

浏览器输出：
1
1.1
2
3
3.1
4
5
5.1
6

async/await

如果遇到async的代码 await后面的程序就挂起 类似于微任务 等到后面的同步任务执行完了再执行
执行顺序按照微任务执行顺序来执行

console.log("start")
async function f1(){
      console.log("f1 start")
      var aa= await 1;//到这里挂起，后面先不执行
     console.log("f1 end")
}
setTimeout(function(){
    console.log("setTimeout ")
},0)
f1();
var pr1 =new Promise(function(resolve){
     console.log(" promise start ")
      resolve();
}).then(function(resoult){
    console.log("promise then")
})
console.log("end")

结果： start=>f1 start=> promise start=> end=>f1 end=> promise then =>setTimeout

变形一下 async和promise交换位置

console.log("start")
async function f1(){
      console.log("f1 start")
      var aa= await 1;
     console.log("f1 end")
}
setTimeout(function(){
    console.log("setTimeout ")
},0)

var pr1 =new Promise(function(resolve){
     console.log(" promise start ")
      resolve();
}).then(function(resoult){
    console.log("promise then")
})
f1();
console.log("end")

结果： start=>promise start=>f1 start=> end=>=> promise then =>f1 end=>setTimeout

再变形：

console.log("start")
async function f1(){
      console.log("f1 start")
      var aa= await 1;
setTimeout(function(){
    console.log("setTimeout 2")
},0)
}
setTimeout(function(){
    console.log("setTimeout ")
},0)
var pr1 =new Promise(function(resolve){
     console.log(" promise start ")
      resolve();
}).then(function(resoult){
    console.log("promise then")
})
f1();
console.log("end")

结果： start=>promise start=> f1 start=> end=> promise then =>setTimeout=>setTimeout 2