12月27, 2016

Promise介绍--异步篇

这部分内容源于知乎上的一个提问

setTimeout(function(){console.log(4)},0);
new Promise(function(resolve){
    console.log(1)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(2)
}).then(function(){
    console.log(5)
});
console.log(3);

// 1
// 2
// 3
// 5
// 4

之前我们说过then方法添加的回调函数都是异步执行的,所以按照我们正常的认知,结果应该是12345,因为4是先添加到异步队列,而5在之后添加到异步队列。

知乎的问题也有何幻大神详细的讲解。这里我就简单的说一下吧。

我们都知道javascript是单线程的,也就是说,一个时间只能做一件事。所以,所有的任务都要按照一定的顺序排队,然后一个一个执行。如果所有的任务都是同步的,那就没有什么问题,代码按照从前到后的顺序依次执行就可以了,但我们实际工作过程中,难免会有一些操作需要异步执行——比如事件,比如ajax,比如setTimeout

所以,浏览器会维护一个任务队列(task queue),任务队列是先进先出的,也就是说,先进入任务队列的会先执行。当主线程任务执行完毕,就会查看任务队列中有没有新任务,如果有,则把第一个任务放到主线程中执行,以此循环往复,这个过程也就是Event loops

我之前也一直都以为浏览器中只有一个任务队列,看到这个问题后才知道。原来浏览器中的任务队列不止一个,且优先级也不同。基本上可以分为如下两种:

macro-task: script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering micro-task: process.nextTick, 原生Promise, Object.observe, MutationObserver

我们看到原生PromisesetTimeout分别属于micro-taskmacro-task。我们之前说的异步任务队列,指的是macro-task。而micro-task的执行顺序,与之不同。

在执行完主线程上的所有任务时,会先去查看micro-task队列中有没有任务,如果有,则依次执行micro-task队列中的所有任务,之后才去查看macro-task队列。每次拿到macro-task队列上任务并执行之后,都会去检查micro-task队列,以此循环。所以上面题目中结果是12354就很明了了。

我们看一个例子,并详细解释它的执行流程。

console.log("script1");

setTimeout(function() {
  console.log("setTimeout1");
}, 300);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script2");

setTimeout(function() {
  console.log("setTimeout2");
  Promise.resolve().then(function() {
    console.log("promise3");
  })
}, 0);

// script1
// script2
// promise1
// promise2
// setTimeout2
// promise3
// setTimeout1

结果如代码中注释所示。具体执行步骤如下:

①代码从上到下执行,先打印出script1

②执行到第一个setTimeout时,发现300ms后把函数添加到macro-task队列中。

③执行Promise时,依次把输出promise1promise2的任务添加到micro-task队列。

④打印script2

⑤执行第二个setTimeout时因为设置的是0ms,所以立即(其实浏览器有最少4ms的限制)添加到macro-task队列中。

⑥主线程执行完毕则检查micro-task队列并执行,输出promise1promise2

⑦然后检查macro-task队列,输出setTimeout2,并把输出promise3的任务添加到micro-task队列。

⑧再次检查micro-task队列并执行,输出promise3

⑨最后检查macro-task队列,输出setTimeout1,因为它是300ms后添加到macro-task队列,所以后输出。

规范中的流程是这个样子,但是不同的浏览器中,实际输出的结果可能会不相同。以上是最新版本的chrome中测试结果。

最后,推荐一篇外国友人的博客,我就是看了这篇文章才完全弄清楚的,里面内容讲的特别详细。

本文链接:https://www.imliutao.com/post/promise-asyn.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。