首页 > 其他分享 >关于async/await、promise和setTimeout执行顺序

关于async/await、promise和setTimeout执行顺序

时间:2024-05-22 17:41:02浏览次数:14  
标签:异步 setTimeout console await 任务 promise async 执行

前段时间领导给我们出了一道题,关于async/await、promise和setTimeout的执行顺序,网上查了查资料,这是头条的一道笔试题,记录一下,加深理解。

题目如下:

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('asnyc1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
    setTimeout(() => {
    console.log('setTimeOut');
}, 0);
async1();
new Promise(function (reslove) {
    console.log('promise1');
    reslove();
}).then(function () {
    console.log('promise2');
   })
console.log('script end');

 

执行结果:

script start
async1 start
async2
promise1
script end
asnyc1 end
promise2
setTimeOut

 


首先,我们先来了解一下基本概念:
js EventLoop 事件循环机制:
JavaScript的事件分两种,宏任务(macro-task)和微任务(micro-task)

宏任务:包括整体代码script,setTimeout,setInterval
微任务:Promise.then(非new Promise),process.nextTick(node中)

事件的执行顺序,是先执行宏任务,然后执行微任务,这个是基础,任务可以有同步任务和异步任务,同步的进入主线程,异步的进入Event Table并注册函数,异步事件完成后,会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue),同步任务执行完成后,会从Event Queue中读取事件放入主线程执行,回调函数中可能还会包含不同的任务,因此会循环执行上述操作。
注意: setTimeOut并不是直接的把你的回掉函数放进上述的异步队列中去,而是在定时器的时间到了之后,把回掉函数放到执行异步队列中去。如果此时这个队列已经有很多任务了,那就排在他们的后面。这也就解释了为什么setTimeOut为什么不能精准的执行的问题了。setTimeOut执行需要满足两个条件:

1. 主进程必须是空闲的状态,如果到时间了,主进程不空闲也不会执行你的回掉函数
2. 这个回掉函数需要等到插入异步队列时前面的异步函数都执行完了,才会执行

上面是比较官方的解释,说一下自己的理解吧:

了解了什么是宏任务和微任务,就好理解多了,首先执行 宏任务 => 微任务的Event Queue => 宏任务的Event Queue

promise、async/await
首先,new Promise是同步的任务,会被放到主进程中去立即执行。而.then()函数是异步任务会放到异步队列中去,那什么时候放到异步队列中去呢?当你的promise状态结束的时候,就会立即放进异步队列中去了。

带async关键字的函数会返回一个promise对象,如果里面没有await,执行起来等同于普通函数;如果没有await,async函数并没有很厉害是不是
await 关键字要在 async 关键字函数的内部,await 写在外面会报错;await如同他的语意,就是在等待,等待右侧的表达式完成。此时的await会让出线程,阻塞async内后续的代码,先去执行async外的代码。等外面的同步代码执行完毕,才会执行里面的后续代码。就算await的不是promise对象,是一个同步函数,也会等这样操作
步入正题:

 


根据图片显示我们来整理一下流程:

1、执行console.log('script start'),输出script start;
2、执行setTimeout,是一个异步动作,放入宏任务异步队列中;
3、执行async1(),输出async1 start,继续向下执行;
4、执行async2(),输出async2,并返回了一个promise对象,await让出了线程,把返回的promise加入了微任务异步队列,所以async1()下面的代码也要等待上面完成后继续执行;
5、执行 new Promise,输出promise1,然后将resolve放入微任务异步队列;
6、执行console.log('script end'),输出script end;
7、到此同步的代码就都执行完成了,然后去微任务异步队列里去获取任务
8、接下来执行resolve(async2返回的promise返回的),输出了async1 end。
9、然后执行resolve(new Promise的),输出了promise2。
10、最后执行setTimeout,输出了settimeout。

写在最后:以上为自己的见解,如错误请及时指正,谢谢!!!

标签:异步,setTimeout,console,await,任务,promise,async,执行
From: https://www.cnblogs.com/houxianzhou/p/18206785

相关文章

  • [ES2024] Manually settle a promise using Promise.withResolvers
    Ifwewanttobeabletomodifythestateofapromisefromoutsidetheconstructor,wecanusethe Promise.withResolvers methodtogetaccesstothepromise,andits resolve and reject functions. //oldapproachletres,rej;constpromise=newPr......
  • Promise 的完全实现
    零、参考资料手把手一行一行代码教你“手写Promise“,完美通过Promises/A+官方872个测试用例手写实现Promise全部实例方法和静态方法,来看看Promise.all、Promise.race和Promise.any都是怎么实现的JS/ES6Promise的不完全实现 一、具体代码exportdefaultcl......
  • JavaScript execute asynchronous functions in Parallel with count and Promise All
    JavaScriptexecuteasynchronousfunctionsinParallelwithcountandPromiseAllInOneJavaScript使用count和Promise并行执行异步函数errorsfunctionpromiseAll<T>(functions:Fn<T>[]):Promise<T[]>{returnnewPromise((resolve,reject)=&......
  • promise(A).catch(f1).then(f2),f1执行后f2回执行吗,为什么
    在JavaScript中,Promise链中的.catch()方法用于捕获前面Promise中的错误,并且无论这个错误是在.then()链中的哪一个环节产生的,.catch()都会捕获到。当错误被.catch()处理之后,如果希望后续的Promise链继续执行,可以这样做。所以对于代码promise(A).catch(f1).then(f2):首先会执行pr......
  • JavaScript Promise Time Limit Function All In One
    JavaScriptPromiseTimeLimitFunctionAllInOneLeetCode2637.PromiseTimeLimiterrorsfunctiontimeLimit(fn:Fn,t:number):Fn{returnasyncfunction(...args){//letbegin=Date.now();letbegin=performance.now();letresult=......
  • setTimeout模拟interval
    functionrunTimer(list=[ { delay:2000, text:'第一步延迟2s' }, { delay:3000, text:'第二步延迟3s' }, { delay:1000, text:'第三步延迟1s' }, ],cb=(text)=>{ console.log('渲染回调&......
  • 09-初始setup-axios-promise
    监听属性需要使用ref和ractive包一下才可以正常监听。//使用相关属性需要导入import{reactive,ref,watch}from"vue";//监听单个letname=ref("阿珂")watch(name,(newValue,oldValue)=>{console.log("老名字",oldValue);console.log("新名字"......
  • [Unit testing - React] Use the waitForElementToBeRemoved Async Util to Await Unt
    Sometimes,youmightneedtowaitforanelementtodisappearfromyourUIbeforeproceedingwithyourtestsetupormakingyourassertion.Inthislesson,wewilllearnaboutawrapperaroundthewaitForthatallowsyoutowaituntilanelementisremove......
  • async await(python)
    简单记录一下asyncawait在Python中的用法以洗衣机洗衣服为例,假设有3台洗衣机,每台洗衣机都需要洗一些衣服一种做法就是依次启动每一台洗衣机,当一台洗衣机结束任务后,开始下一台fromtimeimportsleep,timedeflaundry():defwasher1():print('washeronebeg......
  • 你是怎么理解ES6中 Promise的?使用场景?
    一、介绍Promise,译为承诺,是异步编程的一种解决方案,比传统的解决方案(回调函数)更加合理和更加强大在以往我们如果处理多层异步操作,我们往往会像下面那样编写我们的代码doSomething(function(result){doSomethingElse(result,function(newResult){doThirdThing(newRe......