Promise与setTimeout大家应该都比较熟悉,无论是面试中还是在实际编程它们都会经常出现。面试题中经常会将二者放在一起,加些console,让你判断输出顺序,这些熟悉但是又陌生的code让人抓狂,到底顺序是啥呢?js的世界里没有偶然,没有侥幸,一切发生皆有其原由,今天让我们来一探究竟!
不多说,直接上菜:
setTimeout(() => {
// t1
console.log(1);
}, 0);
// t2
console.log(2);
var promise1 = new Promise(function (resolve, reject) {
// t3
console.log(3);
resolve(4)
setTimeout(() => {
// t5
console.log(5);
});
var promise2 = Promise.resolve().then(() => {
t6
console.log(6);
});
}).then((res) => {
t4
console.log(res);
});
var promsie3 = Promise.resolve().then(() => {
// t7
console.log(7);
});
// t8
console.log(8);
复制代码
大家可以先在纸上写下答案,我们后面会一一拆解。这是一个大综合,看着挺复杂,其实是只纸老虎,只要我们能掌握其关键之处,便能很轻松的写出输出顺序。
首先,我们先观察题目,发现其代码类型可以分为:setTimeout,Promise,全局下的console这三部分,再细致一点其实就是同步任务与异步任务。这类问题的关键就是同步与异步任务的处理,好,让我们一一来分解。
1 javaScript事件循环
javaScript是一门单线程语言(重点),这样js事件循环就好比像是去银行窗口窗口办理业务,得排队按顺序去办理,js事件也得按照注册顺序去执行。那万一中间某一js事件执行时间很长,那是不是得一直等待吗?当然这种情况是存在的,不过我们有相应的处理方式:异步任务。例如我们浏览网页时页面发起的ajax请求,就是异步任务,这样就不阻塞主页面的浏览了。让我们用一张图来说明这个过程:
1 单个异步任务
setTimeout(() => {
console.log('start');
}, 0);
console.log('end');
// end
// start
复制代码
这个很简单,大家应该一目了然
复制代码
2 两个相同方式的异步任务
setTimeout(() => {
// t2
console.log(0);
}, 0);
setTimeout(() => {
// t2
console.log(1);
}, 100);
// 0
// 1
复制代码
对于延时器来说,执行到它时就开始计时,时间结束后将回调注册到任务队列中,于是任务队列
中的顺序是:t2,t1。所以输出便为0,1。
复制代码
setTimeout与Promise混合在一起的时候是什么情况呢?这里我们将异步任务再细分一下:微任务,宏任务。
2 微任务与宏任务
让我们先来看看微任务与宏任务都有哪些:
- 微任务:Promise.then、MutaionObserver、MessageChannel、process.nextTick(Node.js 环境)
- 宏任务:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)
我们用一张图来说明:
在异步任务队列里微任务的优先级是高于宏任务的。在主线程任务结束后,会读取异步任务队列里的任务,判断微任务队列里是是否有任务,有的话执行。执行完毕后循环判断。直至为空,再执行宏任务队列,循环往复。
好,关键之处我们已经讲解完毕,现在让我们回头来看上面的那道‘大综合’ 让我们逐步拆解:
- t1为宏任务,推进异步宏任务队列。
- t2为同步任务,这里直接输出2。
- 下面执行promise1(Promise创建后会立刻执行):执行到t3,直接输出3;执行到t5,推入到异步宏任务队列。由于二者的延时时间相等,所已t1先于t5。
- 然后执行到promsie2,将t6推入到异步微任务队列。
- 执行到promsie1的回调函数then,将t4推入到异步微任务队列。
- 然后执行到promsie3,将t7推入到异步微任务队列。
- 执行到t8,直接输出8
好,现在我们来整理下
- 目前的输出为:2,3,8
- 微任务队列:t6 > t4 > t7
- 宏任务队列:t1 > t5
好,现在我们就能轻易的说出输出的值了:2,3,8,6,4,7,1,5。小伙伴们,你们做对了吗?
以上是我个人对整个过程的理解,在细节上或者一些过程上可能存在些偏差,不是很准确,仅供参考,加深理解。同学们如果发现有不对的地方,欢迎批评指正。