阅读 3286

浅析setTimeout与Promise

关于JavaScript异步编程,前文解析过了JavaScript并发模型,该并发模型基于事件循环。正巧又在Stackoverflow上回答了一个关于setTimeout与Promise执行顺序相关的问题,于是总结这一知识点,与更多读者分享,同时完善JavaScript异步编程系列文章。

我的个人博客

前言

我们先看一到常见的前端面试题:

var p1 = new Promise(function(resolve, reject){
    resolve(1);
})
setTimeout(function(){
  console.log("will be executed at the top of the next Event Loop");
},0)
p1.then(function(value){
  console.log("p1 fulfilled");
})
setTimeout(function(){
  console.log("will be executed at the bottom of the next Event Loop");
},0)
复制代码

上例代码执行输出顺序如何?这道题也是本文创作的源泉,其答案是:

p1 fulfilled
will be executed at the top of the next Event Loop
will be executed at the bottom of the next Event Loop
复制代码

接下来展开解释输出结果原因,看完本文应该能了解setTimeout和Promise的区别。

事件循环

事件循环相关详细内容在JavaScript异步编程一文已经介绍过,本文不再赘述,进行一些补充和总结:

事件循环

可执行代码

思考一下,JavaScript代码是如何执行的呢?是一行一行代码执行的吗?当然不是,JavaScript 引擎一块一块地解析,执行JavaScript代码,而非一行一行进行。在解析,执行代码块时,会需要有一个前期工作,如变量/函数提升,定义变量/函数。这里所说的代码块,通常称作可执行代码(execuable code),通常包括全局代码,函数代码,eval执行代码。而所做的前期工作就是创建执行上下文(execution context)。

执行上下文栈

每当JavaScript引擎开始执行应用程序时,都会创建一个执行上下文栈(后进先出),用以管理执行上下文。在执行一段可执行代码时,会创建一个执行上下文,然后将其压入栈,执行完毕便将该上下文退栈。

function funA() {
    console.log('funA')
}

function funB() {
    fun3A();
}

function funC() {
    funB();
}

funC();
复制代码
ECStack.push(<funC> functionContext);

// funC中调用funB,需创建funB执行上下文,入栈
ECStack.push(<funB> functionContext);

// funB内调用funA,入栈上下文
ECStack.push(<funA> functionContext);

// funA执行完毕,退栈
ECStack.pop();

// funB执行完毕,退栈
ECStack.pop();

// funC执行完毕,退栈
ECStack.pop();

// javascript继续执行后续代码
复制代码

另外,所有的代码都是从全局环境开始执行,所以,必然栈底是全局执行上下文。

异步任务

回顾JavaScript事件循环并发模型,我们了解了setTimeoutPromise调用的都是异步任务,这一点是它们共同之处,也即都是通过任务队列进行管理/调度。那么它们有什么区别吗?下文继续介绍。

任务队列

前文已经介绍了任务队列的基础内容和机制,可选择查看,本文对任务队列进行拓展介绍。JavaScript通过任务队列管理所有异步任务,而任务队列还可以细分为MacroTask Queue和MicoTask Queue两类。

MacroTask Queue

MacroTask Queue(宏任务队列)主要包括setTimeout, setInterval, setImmediate, requestAnimationFrame, UI rendeing, NodeJS中的`I/O等。

MicroTask Queue

MicroTask Queue(微任务队列)主要包括两类:

  1. 独立回调microTask:如Promise,其成功/失败回调函数相互独立;
  2. 复合回调microTask:如 Object.observe, MutationObserver 和NodeJs中的 process.nextTick ,不同状态回调在同一函数体;

MacroTask和MicroTask

JavaScript将异步任务分为MacroTask和MicroTask,那么它们区别何在呢?

  1. 依次执行同步代码直至执行完毕;
  2. 检查MacroTask 队列,若有触发的异步任务,则取第一个并调用其事件处理函数,然后跳至第三步,若没有需处理的异步任务,则直接跳至第三步;
  3. 检查MicroTask队列,然后执行所有已触发的异步任务,依次执行事件处理函数,直至执行完毕,然后跳至第二步,若没有需处理的异步任务中,则直接返回第二步,依次执行后续步骤;
  4. 最后返回第二步,继续检查MacroTask队列,依次执行后续步骤;
  5. 如此往复,若所有异步任务处理完成,则结束;

task Queue

The microTask queue is processed after callbacks as long as no other JavaScript is mid-execution, and at the end of each task. 只要没有其他JavaScript代码在执行,并且在每个任务结束时,就会开始处理microTask队列。

需要注意的是,此处说的的每个任务结束时中的任务通常就是指macroTask,有一个比较特殊的任务- 脚本执行(JavaScript Run,也是一个macroTask,会在JavaScript脚本执行时,立即将JavaScript Run任务入栈macroTask队列。

回顾

本文内容介绍基本结束,那么前文第一个题目输出顺序是为什么呢?简单解释一下:

  1. 开始执行JavaScript脚本,将任务JavaScript Run入栈macroTask队列;
  2. 同步resolvePromise后;
  3. 入栈第一个setTimeout任务进入macroTask队列
  4. 入栈Proimse.then任务进入microTask队列;
  5. 入栈第二个setTimeout任务进入macroTask队列;
  6. 同步执行代码完毕,退出第一个macroTask,即JavaScript Run;
  7. 执行清空microTask;
  8. 执行下一个macroTask;

最后,我们以一个题目再次回顾一下内容:

setTimeout(function(){
  console.log("will be executed at the top of the next Event Loop")
},0)
var p1 = new Promise(function(resolve, reject){
    setTimeout(() => { resolve(1); }, 0);
});
setTimeout(function(){
    console.log("will be executed at the bottom of the next Event Loop")
},0)
for (var i = 0; i < 100; i++) {
    (function(j){
        p1.then(function(value){
           console.log("promise then - " + j)
        });
    })(i)
}

复制代码

代码输出结果是什么呢?快点确认一下吧:

will be executed at the top of the next Event Loop
promise then - 0
promise then - 1
promise then - 2
...
promise then - 99
will be executed at the bottom of the next Event Loop
复制代码
  1. 首先同步执行完所有代码,其间注册了三个setTimeout异步任务,100个Promise异步任务;
  2. 然后检查MacroTask队列,取第一个到期的MacroTask,执行输出will be executed at the top of the next Event Loop;
  3. 然后检查MicroTask队列,发现没有到期的MicroTask,进入第4步;
  4. 再次检查MacroTask,执行第二个setTimeout处理函数,resolve Promise;
  5. 然后检查MicroTask队列,发现Promise已解决,其异步处理函数均可执行,依次执行,输出promise then - 0promise then - 99
  6. 最后再次检查MacroTask队列,执行输出will be executed at the bottom of the next Event Loop
  7. 交替往复检查两个异步任务队列,直至执行完毕;
关注下面的标签,发现更多相似文章
评论