是什么

• 背景：js是一门浏览器语言，因交互问题， 所以采用单进程单线程技术 ，同一时间只能做一个事情
• 定义：为解决单线程运行阻塞问题，js使用了计算机系统的一种运行机制，这种机制称为事件循环

怎么用

在js中所有的任务都可以分为：

• 同步任务：立即执行的代码， 直接进入主线程执行
• 异步任务：如异步请求，settimeout等放入异步队列中

事件循环

同步任务进入主线程，异步任务进入异步队列，主线程内的任务执行完毕， 会去异步队列读取对应的任务，推入主线程执行。上述的过程不断重复就是事件循环

运行流程

宏微任务

• 宏任务：
  • script
  • setTimeout,setInterval
  • UI事件
  • setImmediate、I/O
  • postMessage
• 微任务
  • promise.then
  • process.nextTick
  • MutaionObserver

顺序

同一个上下文中， 先微任务，后宏任务

• 执行一个宏任务，遇到微任务，就把微任务放到微任务事件队列
• 当前宏任务完成后， 查看微任务队列，将里面的任务依次执行完

FAQ

async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2')
}
console.log('script start')
setTimeout(function () {
    console.log('settimeout')
})
async1()
new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})
console.log('script end')

点击查看

script start async1 start async2 promise1 script end async1 end （放入微任务队列） promise2 settimeout