解决 for 循环中使用 var 定义函数的问题

1、问题 

首先，因为 setTimeout 是个异步函数，所以会先把 for 循环全部执行完毕，这时候 i 就是 6了，所以会输出 5 个 6

      for(var i = 1; i <= 5; i++) {
        setTimeout(function timer() {
          console.log(i) // 打印6  6  6  6  6
        }, i * 1000)
      }

2、解决办法

①  使用闭包的方式

使用立即执行函数将 i 传入函数内部，这个时候值就被固定在了参数 j 上不会改变；当下次执行 timer 这个闭包的时候，就可以使用外部函数的变量 j , 从而达到目的。

      for(var i = 1; i <= 5; i++) {
        (function(j) {
          setTimeout(function timer() {
            console.log(j) // 打印1 2 3 4 5
          }, j * 1000)
        })(i)
      }

②  使用 setTimeout 的第三个参数

这个参数会被当成 timer 函数的参数传入

      for(var i = 1; i <= 5; i++) {
        setTimeout(function timer(j) {
          console.log(j)
        }, i * 1000, i)
      }

③  使用 let 定义 i 【推荐】

let 可以定义块级作用域，因为在异步的时候不存在变量覆盖的问题。

      for(let i = 1; i <= 5; i++) {
        setTimeout(function timer() {
          console.log(i)
        }, i * 1000)
      }