promise与setTimeout的执行顺序问题
有一次在面试题中有做到promise与setTimeout的执行顺序,当时有点懵,执行顺序还是弄错了一点点,这里记录下
1.输出
setTimeout(function() { console.log(111) }, 0); setTimeout(function() { console.log(333) }, 1000); new Promise(function(resolve){ console.log(444); resolve(); console.log(555); }).then(function(){ console.log(666); }); console.log(777); async function test1() { console.log("test1"); await test2(); console.log("test1 last"); } async function test2() { console.log("test2"); } test1();
- 输出结果
2.个人理解
- 首先执行同步代码,然后以事件轮询的方式执行异步代码
- promise中的异步体现在.then()和.catch()中
- 而promise中的function里的是同步代码
- 上面的代码是先执行promise里的同步代码,然后执行脚本里本身的同步代码
- async无论方法是同步还是异步都可以用async关键字来进行标识
- 因为用async标识只是显示表明在该方法内,可能会用到await关键字使其变为异步方法,而且将该异步方法进行了明确的划分,只有用了await关键字时才是异步操作,其余一并为同步操作
- 同 Generator 函数一样,async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数
- 当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句
- await 命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中
3.其他
- 在网上还找到了一些资料
参考了这篇文章的一些内容 参考文章
setImmediate(function(){ console.log(1); },0); setTimeout(function(){ console.log(2); },0); new Promise(function(resolve){ console.log(3); resolve(); console.log(4); }).then(function(){ console.log(5); }); console.log(6); process.nextTick(function(){ console.log(7); }); console.log(8);
- 输出结果: 3 4 6 8 7 5 2 1
macro-task: script (整体代码),setTimeout, setInterval, setImmediate, I/O, UI rendering. micro-task: process.nextTick, Promise(原生),Object.observe,MutationObserver
- 第一步. script整体代码被执行,执行过程为
创建setImmediate macro-task 创建setTimeout macro-task 创建micro-task Promise.then 的回调,并执行script console.log(3); resolve(); console.log(4); 此时输出3和4,虽然resolve调用了,执行了但是整体代码还没执行完,无法进入Promise.then 流程。 console.log(6)输出6 process.nextTick 创建micro-task console.log(8) 输出8
- 第一个过程过后,已经输出了3 4 6 8
- 第二步. 由于其他micro-task 的 优先级高于macro-task。
- 此时micro-task 中有两个任务按照优先级process.nextTick 高于 Promise,所以先输出7,再输出5
- 第三步,micro-task 任务列表已经执行完毕,家下来执行macro-task. 由于setTimeout的优先级高于setIImmediate,所以先输出2,再输出1。
优先级: promise.Trick()>promise的回调>setTimeout>setImmediate
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
往期好文推荐:
- 判断iOS和Android及PC端
- 纯css实现瀑布流(multi-column多列及flex布局)
- 实现多行文字及单行的省略号
- 微信小程序之购物车和父子组件传值及calc的注意事项
相关推荐
89500297 2020-05-05
nmgxzm00 2020-11-10
xixixi 2020-11-11
88254251 2020-11-01
MarukoMa 2020-09-02
88234852 2020-09-15
陈旭阳 2020-08-31
whynotgonow 2020-08-19
前端开发Kingcean 2020-07-30
whynotgonow 2020-07-29
bowean 2020-07-08
前端开发Kingcean 2020-07-08
88520191 2020-07-05
前端开发Kingcean 2020-06-27
88481456 2020-06-18
whynotgonow 2020-06-16
88520191 2020-06-13
88520191 2020-06-13