易错javascript编程题汇总（2）

for (var i = 0; i < 5; i++) {    setTimeout(function() {        console.log('i: ',i);    }, 1000);}console.log(i);//输出i:5i:5i:5i:5i:5

为什么会这样而不是i:1 i:2 I:3 i:4 i:5 呢？
因为 同步 => 异步 => 回调

1、for循环和循环体外部的console是同步的，所以先执行for循环，再执行外部的console.log。（同步优先）

2、for循环里面有一个setTimeout回调，他是垫底的存在，只能最后执行。（回调垫底）

那么，为什么我们最先输出的是5呢？

非常好理解，for循环先执行，但是不会给setTimeout传参（回调垫底），等for循环执行完，就会给setTimeout传参，而外部的console打印出5是因为for循环执行完成了。
这里涉及到JavaScript执行栈和消息队列的概念，概念的详细解释可以看阮老师的 JavaScript 运行机制详解:再谈Event Loop – 阮一峰的网络日志，或者看 并发模型与Event Loop

JavaScript单线程如何处理回调呢？JavaScript同步的代码是在堆栈中顺序执行的，而setTimeout回调会先放到消息队列，for循环每执行一次，就会放一个setTimeout到消息队列排队等候，当同步的代码执行完了，再去调用消息队列的回调方法。

在这个经典例子中，也就是说，先执行for循环，按顺序放了5个setTimeout回调到消息队列，然后for循环结束，下面还有一个同步的console，执行完console之后，堆栈中已经没有同步的代码了，就去消息队列找，发现找到了5个setTimeout，注意setTimeout是有顺序的。

那么，setTimeout既然在最后才执行，那么他输出的i又是什么呢？答案就是5。
因为i是用var定义的，所以var是全局变量（这里没有函数，如果有就是函数内部的变量），这个时候的i是5，从外部的console输出结果就可以知道。那么当执行setTimeout的时候，由于全局变量的i已经是5了，所以传入setTimeout中的每个参数都是5。

更多例题

for (var i = 0; i < 5; ++i) {    setTimeout(function() {        console.log('2: ',i);    }, 1000);    console.log('1: ', i); //新加一行代码}console.log(i);//输出1:  01:  11:  21:  31:  452:  52:  52:  52:  52:  5

作者：hyy1115
segmentfault.com/a/1190000008922457
更多详情见：微信公众号 前端大全