JS事件循环原理

前言

为什么写这篇文章？

因为这道题涉及了很多知识点：同步任务、异步任务、宏任务、微任务、任务队列、执行栈、js运行机制、EventLoop,所以想整理一下，写一篇文章，希望对小伙伴们有所帮助!

经典题

下面这段promise、async和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');
}, 0)
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
复制代码

注：因为是一道前端面试题，所以答案是以浏览器的eventloop机制为准的，在node平台上运行会有差异

相信大多数前端都知道，这道题考的就是js里面的事件循环和任务队列

知识点

同步任务、异步任务、宏任务、微任务、任务队列、执行栈、js运行机制、Event Loop

这题考察的是js中的事件循环和任务队列，注意以下几点：

• Promise优先于setTimeout宏任务。所以，setTimeout回调会在最后执行
• Promise一旦被定义，就会立即执行
• Promise的reject和resolve是异步执行的回调。所以，resolve()会被放到回调队列中，在主函数执行完和setTimeout前调用
• await执行完后，会让出线程。async标记的函数会返回一个Promise对象

async介绍

• async function 声明将定义一个返回 AsyncFunction 对象的异步函数
• 当调用一个 async 函数时，会返回一个 Promise 对象
• 当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值
• 当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值

它通过返回一个 Promise 对象来返回结果最大的特点是：

通过 async / await 将异步的操作，但写法和结构却是和我们平时写的（同步代码）是一样

await

• await操作符用于等待一个Promise对象
• await表达式会暂停当前async
• function的执行，等待Promise处理完成，若Promise正常处理,其回调的resolve函数参数作为await表达式的值，继续执行async function
• await意味让出线程操作

返回值（return_value）：返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身,

所以，当await操作符后面的表达式是一个Promise的时候，它的返回值，实际上就是Promise的回调函数resolve的参数

我们都知道Promise是一个立即执行函数，但是他的成功（或失败：reject）的回调函数resolve却是一个异步执行的回调。当执行到resolve()时，这个任务会被放入到回调队列中，等待调用栈有空闲时事件循环再来取走它

promise

async会返回Promise对象，如果返回值不是Promise对象则调用Promise resolve来换成Promise对象

async/await建立在Prmise机制上

总结一句话：带async关键字的函数，它使得你的函数的返回值必定是 promise 对象上

EvenLoop

这里先简单的说一些Event Loop的概念，在最近这段时间我会写一篇关于Event Loop的文章

Javascript是单线程的，所有的同步任务都会在主线程中执行

主线程之外，还有一个任务队列。每当一个异步任务有结果了，就往任务队列里塞一个事件。 当主线程中的任务，都执行完之后，系统会 “依次” 读取任务队列里的事件。与之相对应的异步任务进入主线程，开始执行

异步任务之间，会存在差异，所以它们执行的优先级也会有区别。大致分为 微任务（micro task，如：Promise、MutaionObserver等）和宏任务（macro task，如：setTimeout、setInterval、I/O等）。同一次事件循环中，微任务永远在宏任务之前执行

主线程会不断重复上面的步骤，直到执行完所有任务

题目结果分析过程

第一步，输出script start

虽然有两个函数声明，有async关键字，但是没有调用我们就不看，直接打印同步代码console.log(‘script start’)

第二步，输出async1 start

在执行async1这个函数的时候，async表达式定义的函数也是立即执行 在前面我们说过看到带有async关键字函数，不用慌，它仅仅是把return值包装成了promise,所以就很普通的打印 console.log( 'async1 start' )

第三步，输出async2

async2是async定义的函数，输出async2并返回promise对象， await后，中断async函数，先执行async外的同步代码， 目前就直接打印 console.log('async2')

第四步，输出promise1

执行new Promise()，Promise构造函数是直接调用的同步代码，所以就打印console.log( 'promise1' )

第五步，输出script end

因为上一步先打印了promise1,然后执行到resolve的时候，然后跳出promise继续向下执行，所以就打印console.log( 'script end' )

第六步，输出async1 end

因为await定义的这个promise已经执行完，并且返回结果，所以继续执行async1函数后的任务，就是console.log(‘async1 end’)

第七步，输出promise2

因为前面的new promise放进resolve回调，这个resolve被放到调用栈执行,所以就打印console.log('promise')

第八步，输出setTimerout

最后执行定时器（宏任务）setTimeout,打印console.log( 'setTimerout' )

题目变式一

在这个变式中我将async2中的函数也变成了Promise函数，代码如下：

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    //async2做出如下更改：
    new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
    });
}
console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();

new Promise(function(resolve) {
    console.log('promise3');
    resolve();
}).then(function() {
    console.log('promise4');
});

console.log('script end');
复制代码

正确答案

script start
async1 start
promise1
promise3
script end
promise2
async1 end
promise4
setTimeout
复制代码

题目变式二

我将async1中await后面的代码和async2的代码都改为异步的，代码如下：

async function async1() {
    console.log('async1 start');
    await async2();
    //更改如下：
    setTimeout(function() {
        console.log('setTimeout1')
    },0)
}
async function async2() {
    //更改如下：
    setTimeout(function() {
        console.log('setTimeout2')
    },0)
}
console.log('script start');

setTimeout(function() {
    console.log('setTimeout3');
}, 0)
async1();

new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');
复制代码

正确答案

script start
async1 start
promise1
script end
promise2
setTimeout3
setTimeout2
setTimeout1
复制代码

题目变式三

这道题整体来说与上面题大同小异与，代码如下：

async function a1 () {
    console.log('a1 start')
    await a2()
    console.log('a1 end')
}
async function a2 () {
    console.log('a2')
}

console.log('script start')

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

Promise.resolve().then(() => {
    console.log('promise1')
})

a1()

let promise2 = new Promise((resolve) => {
    resolve('promise2.then')
    console.log('promise2')
})

promise2.then((res) => {
    console.log(res)
    Promise.resolve().then(() => {
        console.log('promise3')
    })
})
console.log('script end')
复制代码

正确答案

script start
a1 start
a2
promise2
script end
promise1
a1 end
promise2.then
promise3
setTimeout
复制代码

最后

如果本文对你有帮助得话，给本文点个赞❤️❤️❤️

欢迎大家加入，一起学习前端，共同进步！