三种方法解决setTimeout的循环输出问题

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

结果：先打印5，一秒后打印5个5

原因：由于JavaScript是单线程的，按顺序执行，setTimeout是异步函数，它会将 内部函数放到任务队列中，而此时会先将循环执行完毕再执行 内部函数，因此当执行 内部函数时 i 已经等于5了，所以最终会输出5个5

方案一：使用let替换var

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

输出：先打印i is not defined，一秒后打印0-4（没有间隔）

原理：let块级作用域，for循环外无法获取i,因为for循环头部的let不仅将i绑定到for循环中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。

setTimeout里面的function()属于一个新的域，通过var定义的变量是无法传入到这个函数执行域中的，通过使用let来声明块变量能作用于这个块，所以function就能使用i这个变量了；

这个匿名函数的参数作用域和for参数的作用域不一样，是利用了这一点来完成的。这个匿名函数的作用域有点类似类的属性，是可以被内层方法使用的。

方案二：使用闭包

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

console.log(i);

输出：先打印5，一秒后打印0-4（没有间隔）

原理：通过闭包，将i的变量驻留在内存中，当console时，引用的是外部匿名函数的变量值i，i的值是根据循环来的

方案三：使用settimeout的第三参数

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

}

console.log(i);

输出：先打印5，一秒后打印0-4（没有间隔）

原理：由于每次传入的参数是从for循环里面取到的值，所以会依次输出0-4