经典闭包问题

你好！在学习js时 常遇到闭包的问题比较棘手 难以理解，接下来我将用一个小案例配合图形 来为大家解释一下原理，希望能对大家的学习有所帮助
（如有不妥之处请指教）

代码如下
for(var i=0;i<5; i++){
setTimeout(function(){
console.log(i,(new Date).toLocaleString())
},1000*i);
}

1
2
3
4
5
6
注释：// i的执行结果为 5 5 5 5 5 （for先执行完了 i为5）
// 解释如下： 因为 for循环部分和 setTimeout console.log为同步事件 , funcition(){},1000*i为 异步操作 所以先将异步操作的部分存放到 任务队列中去（task list） 然后 先执行同步操作的部分 再通过 事件轮询(event loop 监听器)读取它的时间 当1000毫秒结束以后，通知主线程将它的异步操作部分拉回去（在主线程的末尾，同步操作完了，再执行它）
// 注： 协程里边是 先进先出 所以i是按顺序执行的

此时要输出 0 1 2 3 4 我们该如何解决呢？
方案如下：

//第一种解决方法
for(i=0;i<5;i++)
{
(function(i){
setTimeout(function(){
console.log(i);
},1000);
})(i);
} //输出 0 1 2 3 4

1
2
3
4
5
6
7
8
9
10
11
12

// 第二种解决方法
for(i=0;i<5;i++)
{
setTimeout(function(i){
console.log(i);
},1000,i)
} //输出 0 1 2 3 4

1
2
3
4
5
6
7
8
9
解释如下：
setTimeout有两个参数，第一个参数是回调函数，第二个参数是毫秒数，表示要执行回调函数所要延迟的时间。但我们还需要知道的是，setTimeout会返回一个Id，即这个定时器的Id，在上面的代码中其实已经创建了5个定时器，但是默认只返回了最后的一个Id，所以会先输出一个5。
因为5个定时器所打印出来的是同一个i变量，所以想要实现输出不同的数字，就需要把每个定时器所访问的变量独立起来，这就用到了JavaScript的闭包。闭包用途很多，可以很好地区分开各个作用域，避免变量的混淆，但是滥用闭包也会导致性能问题。那么通过下面的修改就可以了；

图片解析：

————————————————
版权声明：本文为CSDN博主「Kevin Yee」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42144338/article/details/84789520