setTimeout async promise执行顺序总结
2018-02-18 18:30
381 查看
最近被看程序写结果的笔试题搞疯了,最典型的当属settimeout,async,promise混用时,哪一步该执行什么,分不清楚。
话不多说,先上代码(该题为今日头条前端开发笔试题) 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我们来挨个分析一下,
await async2();//执行这一句后,输出async2后,await会让出当前线程,将后面的代码加到任务队列中,然后继续执行test()函数后面的同步代码执行到setTimeout函数时,将其回调函数加入队列(此队列与promise队列不是同一个队列,执行的优先级低于promise)。继续执行
创建promise对象里面的代码属于同步代码,promise的异步性体现在then与catch处,所以promise1被输出,然后将then函数的代码加入队列,继续执行同步代码,输出script end。
至此同步代码执行完毕,开始从队列中调取任务执行,由于刚刚提到过,setTimeout的任务队列优先级低于promise队列,所以首先执行promise队列的第一个任务,即执行async1中await后面的代码,输出async1 end。
然后执行then方法的部分,输出promise2。最后promise队列中任务执行完毕,再执行setTimeout的任务队列,输出settimeout。
至此,该题的输出结果分析完毕了,这类的执行结果可以用一句话总结,先执行同步代码,遇到异步代码就先加入队列,然后按入队的顺序执行异步代码,最后执行setTimeout队列的代码。
补充一下队列任务优先级:promise.Trick()>promise的回调>setTimeout>setImmediate
话不多说,先上代码(该题为今日头条前端开发笔试题) 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我们来挨个分析一下,
await async2();//执行这一句后,输出async2后,await会让出当前线程,将后面的代码加到任务队列中,然后继续执行test()函数后面的同步代码执行到setTimeout函数时,将其回调函数加入队列(此队列与promise队列不是同一个队列,执行的优先级低于promise)。继续执行
创建promise对象里面的代码属于同步代码,promise的异步性体现在then与catch处,所以promise1被输出,然后将then函数的代码加入队列,继续执行同步代码,输出script end。
至此同步代码执行完毕,开始从队列中调取任务执行,由于刚刚提到过,setTimeout的任务队列优先级低于promise队列,所以首先执行promise队列的第一个任务,即执行async1中await后面的代码,输出async1 end。
然后执行then方法的部分,输出promise2。最后promise队列中任务执行完毕,再执行setTimeout的任务队列,输出settimeout。
至此,该题的输出结果分析完毕了,这类的执行结果可以用一句话总结,先执行同步代码,遇到异步代码就先加入队列,然后按入队的顺序执行异步代码,最后执行setTimeout队列的代码。
补充一下队列任务优先级:promise.Trick()>promise的回调>setTimeout>setImmediate
相关文章推荐
- 理解JavaScript 执行机制及异步回调(setTimeout/setInterval/Promise)
- 页面事件(Init,Load,PreRender)执行顺序__简单总结
- 有return的情况下try catch finally的执行顺序(最有说服力的总结)
- sp_settriggerorder 设置触发器执行顺序
- 有return的情况下try catch finally的执行顺序(最有说服力的总结)
- st-程序执行的顺序,session使用,a标签使用总结
- 有return的情况下try catch finally的执行顺序(最有说服力的总结)
- Promise 执行顺序
- 有return的情况下try catch finally的执行顺序总结
- Android代码块执行顺序分析总结
- NO.17 【转载】JavaScript程序执行顺序问题总结
- 去哪网实习总结:递归构建“流程执行顺序”的XML文件(JavaWeb)
- 详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
- 有return的情况下try catch finally的执行顺序(最有说服力的总结)
- 7期同学12月5日的上机问题总结【C#类中成员实例化的执行顺序】
- promise.then,process.nextTick, setTimeout 以及 setImmediate 的执行顺序
- JavaScript 程序执行顺序问题总结
- SQL子句执行顺序和Join的一点总结
- 有return的情况下try catch finally的执行顺序(最有说服力的总结)
- ReactNative踩坑日志——使用async/await语法解决网络请求的异步导致的指令执行顺序错乱问题