经典闭包问题
你好!在学习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
本文来自博客园,作者:易先讯,转载请注明原文链接:https://www.cnblogs.com/gongxianjin/p/15747536.html