问题背景
原始代码
for (var i=1; i<6; i++) {
setTimeout(function timer() {
console.log(i);
}, i*1000);
}
预期效果
分别输出数字1～5、每秒1次、每次1个
实际效果
1以每秒1次的频率输出了5个6，如图：
image.png
为何会产生和语义不符的预期？
首先解释“6”从何而来
上述代码中，循环的终止条件是i不再<6，条件首次成立时i的值是6.因此，输出显示的是循环结束时i的最终值。
上述代码的缺陷
这里的缺陷是，我们假设循环中的每个迭代在运行时都会给自己捕获一个i的副本。但是根据作用域的工作原理，虽然i是在5次迭代中分别定义的，但是它们都会被封闭在一个共享的全局作用域中，因此实际上只有一个i。
延迟函数的回调
需要注意的是，延迟函数的回调会在循环结束时才执行。事实上，当定时器运行时，即使每个迭代中执行的是setTimeout(..., 0)，所有的回调函数仍然是在循环结束后才被执行。（因为setTimeout实际执行是在线程最后的，首先执行的是所有的同步代码。）
举个例子：
for (let i=1; i<3; i++) {
console.log('before');
setTimeout(() => {
console.log(i);
}, i*1000);
console.log('after');
}
这段代码的运行结果如下，可以看到1和2是最后才被输出的，而非在before和after中间被输出：
image.png
改进
思路
我们在循环过程的每个迭代中都需要一个闭包作用域，从而可以保存不同的i值。
改进1：无效的尝试
for (var i=1; i<6; i++) {
(function() {
setTimeout(function timer() {
console.log(i);
}, i*1000);
})();
}
此方案的运行结果仍是错误的。在这里我们试图借助一个立即执行的匿名函数（IIFE）来创建单独的词法作用域，但此时这个作用域是空的，因此不会起作用。它需要包含一点实质内容。
改进2：对IIFE方案的改进
for (var i=1; i<6; i++) {
(function() {
var j = i;
setTimeout(function timer() {
console.log(j);
}, j*1000);
})();
}
或者：
for(var i=1; i<6; i++) {
(function(j) {
setTimeout(function timer() {
console.log(j);
}, j*1000)
})(i);
}
运行结果：
image.png
可以看到，这两种方案都可以解决我们的问题！
我们在每次迭代的作用域中声明了新的变量
j（或者随便叫什么名字），使得延迟函数的回调可以将新的作用域封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。
改进3：使用let
for (let i=1; i<6; i++) {
setTimeout(() => {
console.log(i);
}, i*1000);
}
运行结果：
image.png
只是把
var i=1改为let i=1，就可以得到正确的结果！这是因为，
for循环头部的let声明会有一个特殊的行为，这个行为指出变量在循环过程中不止被声明一次，每次迭代都会声明。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。
