1、为何要有事宜轮回？

由于js是单线程的，事宜轮回是js的实行机制，也是js完成异步的一种要领。

既然js是单线程，那就像只要一个窗口的银行，客户须要列队一个一个解决营业，同理js使命也要一个一个递次实行。如果一个使命耗时
太长，那末后一个使命也必需等着。那末题目来了，如果我们想阅读消息，然则消息包含的超清图片加载很慢，岂非我们的网页要一向卡着
直到图片完整显示出来？因而智慧的程序员将使命分为两类：

• 同步使命
• 异步使命

当我们翻开网站时，网页的衬着历程就是一大堆同步使命，比方页面骨架和页面元素的衬着。而像加载图片音乐之类占用资本大耗时久的使命，
就是异步使命。

2、宏使命与微使命

JavaScript中除了普遍的同步使命和异步使命，我们对使命有更邃密的定义：

• macro-task(宏使命): 包含团体代码script，setTimeout，setInterval
• micro-task(微使命): Promise，process.nextTick

差别的范例的使命会进入差别的Event Queue(事宜行列)，比方setTimeout、setInterval会进入一个事宜行列，而Promise会进入
另一个事宜行列。

一次事宜轮回中有宏使命行列和微使命行列。事宜轮回的递次，决议js代码实行的递次。进入团体代码(宏使命-<script>包裹的代码能够
理解为第一个宏使命)，最早第一次轮回，接着实行一切的微使命。然后再次从宏使命最早，找到个中一个使命行列的使命实行终了，
再实行一切的微使命。如：

<script>
    setTimeout(function() {
        console.log('setTimeout');
    })

    new Promise(function(resolve) {
        console.log('promise');
    }).then(function() {
        console.log('then');
    })

    console.log('console');

    /* ----------------------------剖析 start--------------------------------- */

    1、`<script>`中的整段代码作为第一个宏使命，进入主线程。即开启第一次事宜轮回
    2、碰到setTimeout，将其回调函数放入Event table中注册，然后分发到宏使命Event Queue中
    3、接下来碰到new Promise、Promise，马上实行；将then函数分发到微使命Event Queue中。输出: promise
    4、碰到console.log，马上实行。输出: console
    5、团体代码作为第一个宏使命实行完毕，此时去微使命行列中检察有哪些微使命，效果发现了then函数，然后将它推入主线程并实行。
输出: then
    6、第一轮事宜轮回完毕
    开启第二轮事宜轮回。先从宏使命最早，去宏使命事宜行列中检察有哪些宏使命，在宏使命事宜行列中找到了setTimeout对应的回调函数，
马上实行之。此时宏使命事宜行列中已没有事宜了，然后去微使命事宜行列中检察是不是有事宜，效果没有。此时第二轮事宜轮回完毕；
输出：setTimeout

    /* ----------------------------剖析 end--------------------------------- */
</script>

3、剖析更庞杂的代码

<script>
    console.log('1');

    setTimeout(function() {
        console.log('2');
        process.nextTick(function() {
            console.log('3');
        })
        new Promise(function(resolve) {
            console.log('4');
            resolve();
        }).then(function() {
            console.log('5')
        })
    })
    process.nextTick(function() {
        console.log('6');
    })
    new Promise(function(resolve) {
        console.log('7');
        resolve();
    }).then(function() {
        console.log('8')
    })

    setTimeout(function() {
        console.log('9');
        process.nextTick(function() {
            console.log('10');
        })
        new Promise(function(resolve) {
            console.log('11');
            resolve();
        }).then(function() {
            console.log('12')
        })
    })
</script>

一、第一轮事宜轮回

a)、整段<script>代码作为第一个宏使命进入主线程，即开启第一轮事宜轮回
b)、碰到console.log，马上实行。输出：1
c)、碰到setTimeout，将其回调函数放入Event table中注册，然后分发到宏使命事宜行列中。我们将其标记为setTimeout1
d)、碰到process.nextTick，其回调函数放入Event table中注册，然后被分发到微使命事宜行列中。记为process1
e)、碰到new Promise、Promise，马上实行；then回调函数放入Event table中注册，然后被分发到微使命事宜行列中。记为then1。
输出: 7
f)、碰到setTimeout，将其回调函数放入Event table中注册，然后分发到宏使命事宜行列中。我们将其标记为setTimeout2

此时第一轮事宜轮回宏使命完毕，下表是第一轮事宜轮回宏使命完毕时各Event Queue的状况

能够看到第一轮事宜轮回宏使命完毕后微使命事宜行列中另有两个事宜待实行，因而这两个事宜会被推入主线程，然后实行

g)、实行process1。输出：6
h)、实行then1。输出：8

第一轮事宜轮回正式完毕！

二、第二轮事宜轮回

a）、第二轮事宜轮回从宏使命setTimeout1最早。碰到console.log，马上实行。输出: 2
b）、碰到process.nextTick，其回调函数放入Event table中注册，然后被分发到微使命事宜行列中。记为process2
c）、碰到new Promise，马上实行；then回调函数放入Event table中注册，然后被分发到微使命事宜行列中。记为then2。输出: 4

此时第二轮事宜轮回宏使命完毕，下表是第二轮事宜轮回宏使命完毕时各Event Queue的状况

能够看到第二轮事宜轮回宏使命完毕后微使命事宜行列中另有两个事宜待实行，因而这两个事宜会被推入主线程，然后实行

d)、实行process2。输出：3
e)、实行then2。输出：5

第二轮事宜轮回正式完毕！

三、第三轮事宜轮回

a)、第三轮事宜轮回从宏使命setTimeout2最早。碰到console.log，马上实行。输出: 9
d)、碰到process.nextTick，其回调函数放入Event table中注册，然后被分发到微使命事宜行列中。记为process3
c)、碰到new Promise，马上实行；then回调函数放入Event table中注册，然后被分发到微使命事宜行列中。记为then3。输出: 11

此时第三轮事宜轮回宏使命完毕，下表是第三轮事宜轮回宏使命完毕时各Event Queue的状况

能够看到第二轮事宜轮回宏使命完毕后微使命事宜行列中另有两个事宜待实行，因而这两个事宜会被推入主线程，然后实行

d)、实行process3。输出：10
e)、实行then3。输出：12

4、js事宜轮回总结

1）、js实行从最早进入使命行列的宏使命最早，通常是团体<scirpt>代码
2）、宏使命行列事宜悉数实行终了后，搜检微使命行列是不是有事宜，有则实行，直到没有事宜为止
3）、更新render（每一次事宜轮回，阅读器都可能会去更新衬着）
4）、反复以上步骤

5、参考文章

https://juejin.im/post/59e85e…
https://segmentfault.com/a/11…