事件循环是什么东西，一篇文章带你了解

为什么事件会循环？

因为js是默认单线程执行的，但是在执行过程中往往会有耗时任务和不耗时任务，为了效率，js往往会先把不耗时任务（同步任务）执行完，再执行耗时任务（异步任务）

既然如此，为什么不设置多线程呢？

举个例子：如果两个线程同时遇见了一个a=1，另外一个a=2呢，那么他们该怎么执行？往往就会报错，为了解决这种问题，程序员又需要在程序当中添加锁，就会增加代码难度，也会增加设备性能开销

任务执行顺序

在执行的过程中，js通常是从上往下执行，遇到了异步任务的时候，会把任务放到队列中，等同步任务全部结束，再从队列中按照先进先出的顺序，执行剩下的异步任务

异步任务

异步任务分为微任务和宏任务，异步任务在执行的过程中会先执行微任务，再执行宏任务

常见的微任务和宏任务：

微任务：promise.then()、process.nextTick()、MutationObserver()

宏任务：setTimeout()、script标签、setInterval()、ajax、I/O、UI渲染

需要注意的是，所有的setTimeout()函数都共用同一个计时器，所有setTimeout()同时进行倒数，而不是代码执行到此才开始倒计时，所以计时短的会先出队列被执行

js 复制代码

setTimeout(() => {
  console.log('a')
}, 2000)

setTimeout(() => {
  console.log('b')
}, 1000)//b a

本该根据宏任务队列的先进先出顺序，会先输出a，再输出b，但是因为setTimeout()的这一特殊性造成这种结果

事件循环的机制：

所以事件循环机制是：

v8执行时，从上往下执行，遇到异步函数就放入对应队列
去到微任务队列中按先进先出的顺序执行微任务
如果有需要，就渲染页面
去到宏任务队列中按先进先出的顺序执行微任务
当以上被执行完，说明这一次的循环结束，可以开启下一次循环了

asnyc/await 函数

相当于.then()的另一种写法

用.then()的写法

js 复制代码

function A(){
return new Promise((resolve) => {
    setTimeout(() => {
        console.log('a');
        resolve()
    }, 1000)
})
}

function B(){
    console.log('b');
}

A().then(() => {
    B()
})

用async/await的写法：

js 复制代码

function A(){
return new Promise((resolve) => {
    setTimeout(() => {
        console.log('a');
        resolve()
    }, 1000)
})
}

function B(){
    console.log('b');
}

async function fn(){
    await A()
    B()
}
fn()

需要注意的是，两种写法都导致B()有.then()属性，所以B()是微任务A()是同步任务