事件循环

是什么

事件循环是实现单线程非阻塞的方法

解释：

• javascript是一个单线程语言
• js任务分成同步任务，异步任务
  • 同步任务：直接进入主线执行
  • 异步任务：进入任务队列，主线任务为空时执行

宏任务与微任务

异步任务可以分为：宏任务与微任务

• 微任务：主线任务之后、当前宏任务结束之前
• 宏任务：事件粒度大、间隔时间不可控

执行机制：

• 执行主线程任务
• 清空微任务
• 执行当前宏任务，若此时有微任务，将其放入微任务队列
• 当前宏任务执行完后，检查微任务队列，若有则执行所有微任务，
• 开启新的宏任务（循环）

常见的微任务

promise.then

常见宏任务

script setTimeout/setInterval

async和await

• async：用来声明一个异步方法，返回promise对象
• await：等待异步方法执行

async

一下两者等价

function f() {
    return Promise.resolve('TEST');
}

async function asyncF() {
    return 'TEST';
}

await

• await后面跟一个promise对象，返回该对象的结果，若后面不跟promise，则直接返回值
• 不管await后面跟什么，都会阻塞后面代码（加到微任务里）

练习

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