javascript循环和闭包

背景

很多时候在笔试题中会出现以下的看题输出什么

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

解决方案

使用IIFE

在迭代内使用IIFE(立即调用函数表达式)会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部

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

使用let声明

使用let声明，变量会在每次迭代中都会声明

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

使用bind

使用bind的预先处理机制，在循环的时候就把每次执行函数需要输出的结果，预先传给函数即可

var fn = function(i) {
  console.log('bind' + i)
}
for (var i = 1; i <= 5; i++) {
  setTimeout(fn.bind(null, i), i * 1000)
}

如果本文有什么不对的地方请指正。