5分钟搞懂js的宏任务-微任务与事件循环event-loop

首先记住3个东西，死记硬背

1：js是单线程的

也就是说js只有一个主线程，只有一个线程在执行逻辑

2: 微任务与微任务队列

new Promise().then()（promise的回调）, MutaionObserver（前端的回溯）等属于微任务

3: 宏任务与宏任务队列

宏任务指的是：整体代码<script>，settimeout，setinterval等， node中I/O操作等等

4: 调用栈（执行栈）

所有的任务都是放到调用栈，等待主线程来执行

然后再来理解事件循环，调用栈顾名思义，是以栈的形式存在，遵循着先进先出的逻辑存放任务，也就是调用栈最先存入的函数逻辑被执行后才会轮到下一个，直到栈内没有任务为止。（稍微看一下栈的解释即可回来继续往下看了）

当代码块执行的时候，首先会将判断当前的代码段落是宏任务还是微任务， 如果是宏任务则添加到宏任务队列，如果是微任务则添加到微任务队列， 接着会先把宏任务放入到调用栈中执行， 如果执行过程中发现有新的宏任务出现， 则会把新的宏任务添加到宏任务栈中去， 但是这次事件循环中是不会将增加的宏任务执行， 然后直到当前调用栈中空了， 空了后会去微任务栈中获取最早的那个微任务， 当然，如果微任务又生成了新的微任务， 也会在改次调用栈中执行完成， 直到当前微任务栈清空且调用栈也清空了之后， 执行重复这个执行动作的行为就被称为为循环

请多用上面链接中的这个例子去理解: