一篇文章让你彻底搞懂,什么是JavaScript执行机制!( 三 )

  • 又遇到了setTimeout,其回调函数被分发到宏任务Event Queue中,我们记为setTimeout2 。
  • 宏任务Event Queue 微任务Event QueuesetTimeout1process1setTimeout2then1
    • 上表是第一轮事件循环宏任务结束时各Event Queue的情况,此时已经输出了1和7 。
    • 我们发现了process1和then1两个微任务 。
    • 执行process1,输出6 。
    • 执行then1,输出8 。
    好了,第一轮事件循环正式结束,这一轮的结果是输出1,7,6,8 。那么第二轮时间循环从setTimeout1宏任务开始:
    • 首先输出2 。接下来遇到了process.nextTick(),同样将其分发到微任务Event Queue中,记为process2 。new Promise立即执行输出4,then也分发到微任务Event Queue中,记为then2 。
    宏任务Event Queue 微任务Event QueuesetTimeout2process2then2
    • 第二轮事件循环宏任务结束,我们发现有process2和then2两个微任务可以执行 。
    • 输出3 。
    • 输出5 。
    • 第二轮事件循环结束,第二轮输出2,4,3,5 。
    • 第三轮事件循环开始,此时只剩setTimeout2了,执行 。
    • 直接输出9 。
    • 将process.nextTick()分发到微任务Event Queue中 。记为process3 。
    • 直接执行new Promise,输出11 。
    • 将then分发到微任务Event Queue中,记为then3 。
    宏任务Event Queue 微任务Event Queueprocess3then3
    • 第三轮事件循环宏任务执行结束,执行两个微任务process3和then3 。
    • 输出10 。
    • 输出12 。
    • 第三轮事件循环结束,第三轮输出9,11,10,12 。
    整段代码,共进行了三次事件循环,完整的输出为1,7,6,8,2,4,3,5,9,11,10,12 。
    (请注意,node环境下的事件监听依赖libuv与前端环境不完全相同,输出顺序可能会有误差)
    6.写在最后(1)js的异步我们从最开头就说javascript是一门单线程语言,不管是什么新框架新语法糖实现的所谓异步,其实都是用同步的方法去模拟的,牢牢把握住单线程这点非常重要 。
    (2)事件循环Event Loop事件循环是js实现异步的一种方法,也是js的执行机制 。
    (3)javascript的执行和运行执行和运行有很大的区别,javascript在不同的环境下,比如node,浏览器,Ringo等等,执行方式是不同的 。而运行大多指javascript解析引擎,是统一的 。
    (4)setImmediate微任务和宏任务还有很多种类,比如setImmediate等等,执行都是有共同点的,有兴趣的同学可以自行了解 。
    (5)最后的最后
    • javascript是一门单线程语言
    • Event Loop是javascript的执行机制




    推荐阅读