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

JS之EventLoop

JS之EventLoop

EventLoop

async/await