如何通过setTimeout理解JS运行机制详解

序

setTimeout()函数：用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数，表示定时器timer的编号，可以用来取消该定时器。

例子

console.log(1);setTimeout(function () { console.log(2);}, 0);console.log(3);

问：最后的打印顺序是什么？（如果不了解js的运行机制就会答错）

正确答案：1 3 2

解析：无论setTimeout的执行时间是0还是1000，结果都是先输出3后输出2，这就是面试官常常考查的js运行机制的问题，接下来我们要引入一个概念，JavaScript 是单线程的。

二、 JavaScript 单线程

JavasScript引擎是基于事件驱动和单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行程序，即主线程。

通俗的说：JS在同一时间内只能做一件事，这也常被称为 “阻塞式执行”。

任务队列

那么单线程的JavasScript是怎么实现“非阻塞执行”呢？

答：异步容易实现非阻塞，所以在JavaScript中对于耗时的操作或者时间不确定的操作，使用异步就成了必然的选择。
诸如事件点击触发回调函数、ajax通信、计时器这种异步处理是如何实现的呢？

答：任务队列

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

任务队列：一个先进先出的队列，它里面存放着各种事件和任务。

同步任务

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。

异步任务

除此之外，任务队列又分为macro-task（宏任务）与micro-task（微任务），在ES5标准中，它们被分别称为task与job。

宏任务

I/O setTimeout setInterval setImmdiate requestAnimationFrame

微任务

process.nextTick Promise Promise.then MutationObserver

宏任务和微任务的执行顺序

一次事件循环中，先执行宏任务队列里的一个任务，再把微任务队列里的所有任务执行完毕，再去宏任务队列取下一个宏任务执行。

注：在当前的微任务没有执行完成时，是不会执行下一个宏任务的。