JS的同步与异步任务执行过程

JS为了防止任务排队或者等待事件较长的问题，于是将所有的任务分成了：同步任务与异步任务；

比如对于以下事例1的程序，程序的执行结果是什么呢？

事例1

结果为：1、2、3；

同步任务

同步任务都在主线程上执行，形成了一个执行栈；

异步任务

JS的异步是通过回调函数实现的。一般而言，异步函数有以下三种类型：

1、普通事件，如：click，resize等；

2、资源加载，如：load，error等；

3、定时器，包括setInterval(),setTimeout()等；

异步任务相关回调函数添加到任务队列（消息队列）中了；

---

对于事例1，首先将同步任务放入执行栈中，将异步任务放入任务队列中，如图2:

图2

那么接下来JS是如何执行的呢？

1、先执行执行栈中的同步任务；

2、遇到异步任务（回调函数），先将其放入任务队列（消息队列）中；

3、一旦执行栈中所有的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务就会结束等待状态，进入执行栈，开始执行。（所以事例1的执行顺序为1、2、3）

以下图3的形象说明可助理解：

图3

                                （所以主车道上有什么比较耗时的操作就会放在应急车道上）