Js 执行栈！ 如何理解？！小白篇

大家好，今天给大家介绍一篇关于 同步与异步 的概念性型文章；

再开始之前，首先给大家介绍一下关于 JS 的异步机制；

在我们的javascript中 所有的程序执行流程都是单进程执行，但是为了应对可能出现的网络延迟，或者请求过多等等程序运行堵塞问题，所以引入了异步机制，如果在主线程中遇到这种问题，就将这个问题交给异步机制，它会单独给这个 任务开一个线程，让它自己去执行。主线程继续运行，无论它好还是不好 ，主线程都不管，当然，也不是全不管，当异步任务完成任务之后会在主线程完成之后加入主线程中继续执行；

 

打个比喻，一天早上，小明早上上学还有10分钟就要迟到了，但是早餐还没吃，书包还没装好，衣服还没穿，如果小明不急完全可以 先穿好衣服  ------>装好书包  ------->做好早餐  ----->上学路上吃早餐；但是小明来不及一一做好了，怎么办呢。ok，小明将装书包的任务交给 爸爸去做，将做早餐的任务交给妈妈去做，自己去穿好衣服，如果爸爸妈妈速度很快 ，妈妈和爸爸都做好了任务，将成果在小明空闲的时候再交给他，小明就可以直接上学路上吃早点了，如果爸爸妈妈速度很慢，小明做好了手上的事情，但是爸爸妈妈的任务还没有完成，那么小明要么等待，要么惨兮兮的去上学（没有早点，还没有书包，hahaha）

ps:爸爸妈妈的速度映射到程序中关系到 微任务什么时候进入任务队列中

 

说到这个异步机制，我们首先需要了解俩个名词 -- 宏任务，微任务（也有人叫他们为 事件队列和优先级事件队列），那么它们是什么东西呢，和异步机制有什么关系呢；

OK，我们首先了解一下宏任务：

  宏任务  可以理解为js中的主线程，但是又还有  setTimeout, setInterval, setImmediate, I/O, UI rendering。在这些宏任务执行中，程序都是同步处理，对于遇到微任务都会直接放到异步进程中去处理，不会影响整体的处理；可以理解为上述举例中关于小明自己的做的事情

ok，再了解一下微任务

  微任务  也就是异步任务，基本包括了ES6最新的语法（Promise ，process.nextTick）这些都不参与事件循环，而是单独开出线程进行运算；可以理解为上述举例中关于小明交个爸爸妈妈做的事情。

OK，知道了以上名词，我们可以开始熟悉一下关于 JS中的 执行机制；

首先，我们看个图

 

图中，很明显我们能看出整体流程是 在  循环宏任务的情况下，每当当前轮宏任务执行完成询问任务队列是否存在任务，存在执行，不存在执行下一轮宏任务;

 

OK,这些我们了解之后，来一道题目考考各位吧，毕竟 实战出经验！

 

 

看起来很复杂，如果单我们真的了解 机制之后，这些问题就好比 纸老虎，一戳就破 HAHAHAHA！

分析， 宏任务执行 1 ->2 遇见setTimeout 放入下一轮宏任务循环中，->4 遇见.then(fn)放入异步线程执行，继续遇见setTimeout，一样，继续放入下一轮宏任务循环中（包括 new Promise），->9

那么第一轮我们输出了 1->2->4->9

ok,询问任务队列，找到第一个.then输出 5

第二轮开始，输出 3， 1s之后第二个setTimeout 宏任务进入主线程，-->6，-->7， 遇见.then(fn)放入异步线程执行。

第二轮结束，我们输出了 5->3->6->7

询问任务队列，找到第二个.then输出 8

发现没有宏任务进程了，ok，结束！

 

所以执行结果为 1->2->4->9->5->3->6->7->8

通过以上 知识点，大家有没有稍微了解一些关于异步的点了呢，如果没有了解，不要紧，主要是我们要在心里有影响，再在后面的练习中才能更加明确的熟悉整个机制的执行；为了巩固大家的知识点，我会在本文最下方 出几道不同级别的题目，让大家层层渐进的去学习，了解它们；

 

当然 在使用了promise的异步之后，我们可能会遇见一种情况，语数外三门作业给不同的小伙伴去完成，但是小明必须在三个小伙伴完成之后才能交作业，这种情况可能在现实中很简单，等就等嘛，但是在程序中，它可不知道如何等待，所以这里需要使用到状态机的语法糖  ES6---async + await  

ES6---async + await  

简单的来说，就是字面意思的等待，不过有个特点就是，async 的函数返回的都是 一个promise对象，也就是说，它会等待你在

await的任务完成之后再继续宏任务。

看如下代码

在我们之前的异步执行流程来看

就是 1 3 2 ，

但是由于使用了async+await 所以主线程必须等待await 的任务完成之后才能继续执行后面的流程也就是

 1 2 3

这就可以叫做   异步的同步的管理方式

 

以上，就是给大家介绍的关于 异步，同步，promise，async+await 的相关文章。

本人不才，如果有差错的地方，请大家能够及时告诉我，我们共同进步；

第一次写 自认为 比较轻松，幽默的文章，如果大家喜欢，请多多留言，关注。我会更加努力与大家共进步！！！

下面，就是不同阶段的题目，如果大家有兴趣可以空闲时间来做一做！！

 

阶段 一：

阶段二 :

阶段三

 

题目的答案会在下一篇文章的末尾给大家公布！！！感谢各位看官了！！！！