阅读 139

Promise与setTimeout那些事儿

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。小伙伴们,你们做对了吗?

以上是我个人对整个过程的理解,在细节上或者一些过程上可能存在些偏差,不是很准确,仅供参考,加深理解。同学们如果发现有不对的地方,欢迎批评指正。