Promise和setTimeout执行顺序 面试题
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Promise和setTimeout执行顺序 面试题</title> </head> <body> <script type="text/javascript"> setTimeout(function() { console.log(1) }, 0); new Promise(function(a, b) { console.log(2); for(var i = 0; i < 10; i++) { i == 9 && a(); } console.log(3); }).then(function() { console.log(4) }); console.log(5) </script> </body> </html>
最需要 解释的是：then和settimeout执行顺序，即setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.then()在本轮“事件循环”结束时执行。因此then 函数先输出，settimeout后输出。
setTimeout async promise执行顺序总结
async function async1() {
console.log("async1 start");
//执行这一句后，输出async2后，await会让出当前线程，将后面的代码加到任务队列中，然后继续执行test()函数后面的同步代码 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
-
promise2
-
async1 end
-
settimeout
执行到setTimeout函数时，将其回调函数加入队列(此队列与promise队列不是同一个队列，执行的优先级低于promise)。继续执行
创建promise对象里面的代码属于同步代码，promise的异步性体现在then与catch处，所以promise1被输出，然后将then函数的代码加入队列，继续执行同步代码，输出script end。
至此同步代码执行完毕，开始从队列中调取任务执行，由于刚刚提到过，setTimeout的任务队列优先级低于promise队列，所以首先执行promise队列的第一个任务，执行then方法的部分，输出promise2,然后执行async1中await后面的代码，输出async1 end。
最后promise队列中任务执行完毕，再执行setTimeout的任务队列，输出settimeout。
至此，该题的输出结果分析完毕了，这类的执行结果可以用一句话总结，先执行同步代码，遇到异步代码就先加入队列，然后按入队的顺序执行异步代码，最后执行setTimeout队列的代码。
补充一下队列任务优先级：promise.Trick()>promise的回调>async>setTimeout>setImmediate，
不过如果 await 后面跟着 Promise 的话，async1 end 需要等待三个 tick 才能执行到。那么其实这个性能相对来说还是略慢的，所以 V8 团队借鉴了 Node 8 中的一个 Bug，在引擎底层将三次 tick 减少到了二次 tick。也就是说v8引擎浏览器打印出来的，promise2和async1 end是相反的。
————————————————
版权声明：本文为CSDN博主「yujin0222」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/baidu_33295233/article/details/79335127