一、调用栈堆（不知道为什么开始写博客，大概是CV太累了吧~缓缓）

放在最前面

掘金上一个大佬关于调用栈堆的文章.他的文章比较详细风趣，图文并茂，以下只是我的学习历程

一、调用栈堆

1.js是单线程！单线程！单线程语言

2.js事件循环(直接上图)

在这里插入图片描述

同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。

当指定的事情完成时，Event Table会将这个函数移入Event Queue。

主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。

上述过程会不断重复，也就是常说的Event Loop(事件循换)。

总结：先完成同步的操作，然后读取异步的回调函数，执行函数中代码，之后继续这一过程，直至没有请求为止。

3.定时器(setTimeout)和延时器(setInterval)

setTimeout(() => {
    console.log('延时3秒');
},3000)

定时器和延时器是典型的异步执行操作，上面的定时器设置了三秒延迟，但不是3秒之后就一定触发了，在第二点中说过，异步操作需要等待同步操作的完成，设置时间为零毫秒同理。
延时器有点特殊，延时器是每隔多少毫秒就把对应的回调函数丢进对应的异步栈中，所以当异步回调函数的执行时间高于延时器设置的毫秒数，看起来就跟没有延迟一样。(作者原话：一旦setInterval的回调函数fn执行时间超过了延迟时间ms，那么就完全看不出来有时间间隔了。)

总结：异步操作牛批！还有延迟在理论上是无法达到0ms的，因为HTML的标准原因，最低延迟时间为4ms，虽然人眼是无法分辨的。

4.promise和nextTick

1.promise.的含义(点击就送屠龙宝刀!阮一峰老师<在线>回收装备!)
此链接包括了es6的绝大部分东西，内容太多，请谨慎点击！看完头发估计会少两根！
2.这边分成了两种任务：

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
micro-task(微任务)：Promise，process.nextTick

宏任务和微任务都拥有Event Queue
3.不多说，直接贴段代码

setTimeout(function() {
    console.log('setTimeout');
})

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

console.log('console');

1.这段代码作为宏任务，进入主线程。
2.先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。(注册过程与上同，下文不再描述)
3.接下来遇到了Promise，new Promise立即执行，then函数分发到微任务Event Queue。
遇到console.log()，立即执行。
4.好啦，整体代码script作为第一个宏任务执行结束，看看有哪些微任务？我们发现了then在微任务Event Queue里面，执行。
5.ok，第一轮事件循环结束了，我们开始第二轮循环，当然要从宏任务Event Queue开始。我们发现了宏任务Event Queue中setTimeout对应的回调函数，立即执行。
6.结束。具体流程看下图，容易分析，大佬是真滴牛批!

到这我已经知道了具体的执行顺序，现在贴一个大佬出的题目

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')
    })
})

作者：ssssyoki
链接：https://juejin.im/post/59e85eebf265da430d571f89
来源：掘金
这边我再次把大佬的链接放在这，想知道答案的自己去看大佬的文章吧，推荐自己思考下。
不要CV然后执行！不要CV然后执行！不要CV然后执行！
1,7,6,8,2,4,9,11,3,5,10,12这是我第一次的答案2333错的答案，正确的去看大佬链接吧

5.总结

总结个屁啊，回去撸代码了！！！

在这里插入图片描述

来源：https://blog.csdn.net/iloveyuyu44/article/details/99315476

标签

微任务

回调函数

nexttick