async ,await,setTimeout,Promise函数

这道题主要考察的是事件循环中函数执行顺序的问题,其中包括async ,awaitsetTimeoutPromise函数。下面来说一下本题中涉及到的知识点。

复制代码
//请写出输出内容
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
*/
复制代码

首先我们需要明白以下几件事情:

  • JS分为同步任务和异步任务
  • 同步任务都在主线程上执行,形成一个执行栈
  • 主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件。
  • 一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。

任务队列(task queue),一个任务队列便是一系列有序任务(task)的集合;每个任务都有一个任务源(task source),源自同一个任务源的 task 必须放到同一个任务队列,从不同源来的则被添加到不同队列。setTimeout/Promise 等API便是任务源,而进入任务队列的是他们指定的具体执行任务。

宏任务:(macro)task(又称之为宏任务)

微任务:microtask(又称为微任务)

运行:

  • 执行一个宏任务(栈中没有就从事件队列中获取)
  • 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
  • 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
  • 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
  • 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)

https://www.ximalaya.com/yinyue/25395682/
https://www.ximalaya.com/yinyue/25395691/
https://www.ximalaya.com/yinyue/25371172/
https://www.ximalaya.com/yinyue/25371180/
https://www.ximalaya.com/yinyue/25371165/
https://www.ximalaya.com/yinyue/25371160/
https://www.ximalaya.com/yinyue/25371154/
https://www.ximalaya.com/yinyue/25371139/
https://www.ximalaya.com/yinyue/25371144/
https://www.ximalaya.com/yinyue/25371134/
https://www.ximalaya.com/yinyue/25371129/
https://www.ximalaya.com/yinyue/25371103/
https://www.ximalaya.com/yinyue/25371093/
https://www.ximalaya.com/yinyue/25371073/
https://www.ximalaya.com/yinyue/25371080/
https://www.ximalaya.com/yinyue/25371065/
https://www.ximalaya.com/yinyue/25371060/
https://www.ximalaya.com/yinyue/25371052/
https://www.ximalaya.com/yinyue/25371048/
https://www.ximalaya.com/yinyue/25371038/
https://www.ximalaya.com/yinyue/25371024/
https://www.ximalaya.com/yinyue/25370987/
https://www.ximalaya.com/yinyue/25370978/

猜你喜欢

转载自www.cnblogs.com/strugksjncxa/p/11256258.html