for中用var和let触发定时器的区别

for中用var和let触发定时器的区别

一、题目

以下两个题目分别会console.log出什么东西?

// 题目一
for(var i = 0;i < 5;i++){
  setTimeout(function(){
    console.log(i);
  })
}
// 题目二
for(let i = 0;i < 5;i++){
  setTimeout(function(){
    console.log(i);
  })
}

答案：

二 、var和let的区别

var是函数级作用域 let是块级作用域

并且var有变量提升 有时候会发生变量在全局泛滥使用的结果

比如：

console.log("for以前"+index);
for (var index = 0; index < 5; index++) {
  console.log(index);
}
console.log("for以后"+index);

运行结果:

如果用let则在for外的代码都会报错

三、解析

题目一：

1.var的变量提升 所以会在for之前先定义出i

2.setTimeout()第一参数是回调函数，会将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。所有就相当于

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

那为什么用let就可以？

题目二：

1.let是块级作用域 所有相当于for的每一次循环i都会重新定义

2.let没有变量提升并且不能重新定义

3.for 循环机制决定了它每次循环都是不同的块级作用域(这里与let声明块级作用域吻合)
JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。(实现了i初始化)

四、那有没有其他的做法不用let也可以完成？

比如用闭包等方法

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