一道JavaScript 的事件循环题

发布于 / web前端 / 12 条评论/ 最后更新:19-04-03

今天看到一道事件循环的题 来简单说说我的理解

//请写出输出内容
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');

解题思路

1.首先Javascript是从上往下顺序执行的,每次执行栈执行的代码就是一个宏任务,所以会先打印出script start

2.然后碰到setTimeout(function()console.log('setTimeout');}, 0),setTimeout属于宏任务,会放到下一个宏任务中执行;

3.再执行async1()打印出async1 start;

4.继续往下走,由于async函数属于立即执行函数,所以打印出async2,将console.log('async1 end');放到微任务队列中;

5.继续执行当前宏任务,打印出promise1,将promise2放入微任务中;

6.打印script end,当前宏任务结束,当前宏任务打印出的结果依次为script startasync1 startasync2promise1script end

7.再执行微队列中的内容,首先打印出async1 end,再打印出promise2;

8.最后再执行下一个宏队列中的代码,打印出setTimeout

所以最后的答案是:


script start

async1 start

async2

promise1

script end

async1 end

promise2

setTimeout

原理

JS分为同步任务和异步任务,每个任务都有任务源,任务分为宏任务和微任务。宏任务主要包含:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境);微任务主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境);

async函数在await函数前是立即执行的

宏任务执行完后,会立刻执行微任务,待所有微任务执行完后,又开始执行下一个宏任务。

由于本人是按照参考资料加自己理解来的,说的不对请指出哈

参考资料

从一道题浅说 JavaScript 的事件循环

转载原创文章请注明,转载自: Hero-x » 一道JavaScript 的事件循环题
  1. avatar

    我已经实现了。