详解JS执行队列(JavaScript执行顺序)，搞懂setTimeout方法到底是如何执行的

定义：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

举个栗子：

image1.png

但是setTimeout真的有那么简单吗？到底setTimeout是不是异步执行的呢?

没这么简单，再看一个栗子：

image2.png

我们在setTimeout里面指定了0ms，是希望这段代码能立即执行，但是实际上并没有效果，而是先打印出了2，然后才是1，最后大约1s的时间打印3。
这是不是就说明setTimeout就是异步的呢？
如果是异步的同时执行多个setTimeout（）应该同时会执行，请再看下面的栗子：

image3.png

从上面的代码可以知道，JS不是多线程的，那js就是单线程的？有么有异步执行呢？

出现上面所有误区的最主要一个原因是：我们潜意识中认为，JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的.
而事实上的,JavaScript使用了障眼法,在多数时候骗过了我们的眼睛,这里得澄清一个事实：

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。

除了主JavaScript执行进程外，还需要一个在进程下一次空闲时执行的代码队列（这个队列就是监听执行回调的）。
随着页面生命周期推移，代码会按照执行顺序添加入队列，例如当按钮被按下的时候他的事件处理程序会被添加到队列中，并在下一个可能时间内执行。JavaScript中没有任何代码是立即执行的，但一旦进程空闲则尽快执行。
所以，定时器工作方式是当特定时间过去后将代码插入，但这并不意味着它会马上执行，只能表示它尽快执行。
设定一个150ms后执行的定时器，不代表150ms后它会马上执行，它只表示在150ms后被加入到执行队列中，如果这个时间点执行队列是空闲的，那么这段代码就会被执行;其他情况下,代码可能明显地等待更长时间才会去执行。
看下面这个栗子：

image4.png

上面的例子里，一般的理解应该是先打印0ms的再打印500ms的，但是，其实js在解析的时候遇到了setTimeout方法，第一次过了0ms后把延时0ms的优先加入执行队列里，再在500ms后把延时500ms的其放入待执行的队列里，跳过去顺序执行下面的代码，当主线程中的代码执行完成后，js引擎去检索待执行的队列有没有待执行的代码，这时候就会发现setTimeout方法并顺序执行，（因为已经过了定时器规定的延时时间，所以会立即执行，两个定时器的延时都是一样的）。

JS执行队列总结

（1）所有同步任务都在主线程上执行。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入主线程执行栈，开始执行。
（4）主线程不断重复上面的第三步。

setTimeout方法、事件和回调函数（异步函数）

"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。但是，由于"定时器"功能和事件驱动等，主线程首先要检查一下执行时间或事件是否被触发，才能返回主线程。

当一个JS文件中有很多回调函数的时候，我们无法确认哪个回调会先进入任务队列。所以，遇到回调的时候要小心处理啦。