for循环里的定时器

在学习js的时候，或者面试的时候，会经常碰到这一道经典题目：

for(var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    });
}
console.log('a');

熟悉这道题目的人立马就可以说出答案：

'a'
5
5
5
5
5

结果是先打印字符串'a'，然后再打印5个数字5。

有人会说这个题目并不难，而且只要你遇到过这个题目，下次再见到基本也不会答错了，但其实这段简单的代码里面包含了很多js知识。

这里就整理总结一下。

单线程、任务队列以及事件循环（event loop）

第一次看到这段代码的时候，会给人一种错觉：

1. 会先打印for循环里面的5次i值，然后才会去打印下面的字符串'a'
2. for循环里面的打印结果会是0,1,2,3,4，而不是什么5个5这种奇怪的结果

但是实际运行结果跟我们预期的不一样，原因就是因为这里涉及到了js的运行机制。

单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

为什么不允许js可以实现多线程？因为如果实现了多线程，一个线程创建了一个div元素，而另外一个线程删除了这个div元素，那么这个时候浏览器应该听谁的？

所以为了避免出现这种互相冲突的操作，js从一开始就是单线程的，这就是它的核心特征。

任务队列

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的