引言

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

1. 例子

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

问：最后的打印顺序是什么？
这个问题如果不了解js的运行机制就会答错
正确答案是：1 3 2

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

2. JavaScript 单线程

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

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

2.1 任务队列

那么单线程的JavasScript是怎么实现诸如事件点击触发回调函数、ajax通信、计时器这种异步处理的东西呢？
答案是任务队列
所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

2.1.1 同步任务

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

• 输出
• 变量的声明

2.1.2 异步任务

• setTimeout和setInterval
• DOM事件
• ES6中的Promise

3. setTimeout运行机制

setTimeout和setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。

优先关系：异步任务要挂起，执行同步任务，同步任务执行完毕才会进行异步任务。

4. 例子

console.log('A');
setTimeout(function () {
    console.log('B');
}, 0);
while (1) {}

大家再猜一下这个输出的结果会是什么？
正确答案是：A

注：必须先注释掉代码，执行后一定要会强制删除进程，不然会卡住。

同步队列输出A之后，陷入while(true){}的死循环中，异步任务不会被执行。类似的，有时addEventListener()方法监听点击事件click，用户点了某个按钮会卡死，就是因为当前JS正在处理同步队列，无法将click触发事件放入执行栈，不会执行，出现“假死”。

5. 例子

for (var i = 0; i < 4; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

正确答案是：4 4 4 4

for循环是一个同步任务，为什么连续输出四个4？
因为有队列插入的时间
执行时间从1000改成0，还是四个4。

5.1 异步队列执行的时间

那么执行到异步任务的时候，会直接放到异步队列中吗？不一定。浏览器有个timer模块，定时器到了执行时间才会把异步任务放到异步队列。for循环体执行的过程中并没有把setTimeout放到异步队列中，只是交给定时器模块了。4个循环体执行速度非常快。定时器到这个时间才会把setTimeout语句放到异步队列中，异步队列执行事件循环。

难点是异步队列的放入时间和执行时间。

6. 事件循环 Event Loop

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

有时候明明写的延时3秒，实际却5，6秒才执行函数，这又是因为什么？

setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。浏览器的JS引擎遇到setTimeout，拿走之后不会立即放入异步队列，同步任务执行之后，到时间之内放到异步队列中。即使setTimeout设置的0毫秒，也按4毫秒算，继续执行。（HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。）执行栈空了就从异步队列中执行，如此循环，就叫Event Loop。

总结

JavaScript通过事件循环和浏览器各线程协调共同实现异步

知识点梳理

• 理解JS的单线程的概念
• 理解任务队列
• 理解Event Loop
• 理解哪些语句会放入异步任务队列
• 理解语句放入异步任务队列的时机

最后，希望大家阅后有所收获。