Promise与setTimeout那些事儿

易小星
615 阅读4分钟

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

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

avatar
文章
阅读
粉丝