有关循环+闭包的一个代码片段

问题背景

---

原始代码

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声明会有一个特殊的行为，这个行为指出变量在循环过程中不止被声明一次，每次迭代都会声明。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。