闭包解决for循环 的代码示例，解释为什么for循环后，打印的i值不是它自己当时的取值

最新推荐文章于 2022-03-21 14:52:07 发布
最新推荐文章于 2022-03-21 14:52:07 发布
阅读量1k 收藏 1
点赞数
分类专栏： javascript js原理 文章标签： 闭包 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ForMyQianDuan/article/details/51890926
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    li{
        cursor:pointer;
    }
</style>

<ul id="ul1">
    <li>sdfsd</li>
    <li>ffff</li>
    <li>222</li>
    <li>aaa</li>
</ul>
</body>
<script>
    var liList = document.getElementsByTagName("li");

//    有问题的写法
     /*for(var i=0;i<lis.length;i++){
       lis[i].onclick = function(){
            alert(i);
        }
    }
    i=40;*/

//此时，点击li，弹出框显示的信息是40.为什么呢？这说明i值已经被赋值成为40了。而由于点击onclick调用了匿名函数，调用会产生上下文，于是为这个匿名函数创建的上下文，其中它的自由变量i的值取到的是父级作用域的i值，此时i=40。又由于每调用一次onclick就会创建一个上下文，每次建立的上下文中的自由变量i的取值都取的父级作用域中的i值。所以！！点击onclick后，每次都会显示40.而不是0,1,2....。

    //解决问题的写法1：使用闭包的第一种写法
/*    for(var i=0;i<lis.length;i++){
        lis[i].onclick = (function(i){
            return function(){
                alert(i);
            }
        })(i);
    }*/


    //解决问题的写法2：使用闭包的第二种写法
 /*   for(var i=0;i<lis.length;i++){
        (function(i){
                    lis[i].onclick = function(){
                        alert(i+'a');
                    }
                }
        )(i);
    }*/


// 解决问题的写法3，给它的属性赋值：
    for(var i=0;i<liList.length;i++){
        liList[i].index = i;
        liList[i].onclick = function(){
            alert(this.index);
        }
    }

</script>
</html>
ForMyWebFrontSide
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈js for循环输出i为同一值的问题
11-26
1、最近开发中遇到一个问题，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。 代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf...
循环中的闭包
Lyrelion的博客
11-27 867
循环中的闭包
使用闭包实现每隔一秒打印 1,2,3,4
weixin_47450807的博客
03-21 1165
一、写在前面 我们如果想要实现一个功能，每隔一秒打印1，2,3，4。此时我们想到的最简单的方法就是使用for循环加上定时器。 但是我们如果使用如下方式进行书写。 for(var i = 1; i < 5; i++){ setTimeout(() => { console.log(i) }, i * 1000) } // 5 5 5 5 如上述代码所示，此时打印出4个5，这明显不是我们想要的结果。 二、使用闭包进行解决 上面结果出现的原因是，var不存在块级作用域，当进行for循环时，
闭包面试题之闭包解决for循环打印
Sunday97的博客
08-21 1395
闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉 1、正常的for循环打印 for (var i = 0; i < 4; i++) { console.log(i); 输出的是0、1、2、3 2、加了延迟的for循环打印 for (var i = 0; i < 4; i++) { ...
循环中setTimeout打印结果（使用闭包）
DLGDark的博客
10-01 2662
for(var i=1;i<4;i++){ setTimeout(function(){ console.log(i); },1000); } 上面的代码会在1秒之后输出3个4，原因是i为全局变量，会先执行完循环（js是单线程机制，先执行同步代码，最后执行异步代码，setTimeout是异步调用），此时i的值已经为4，之前每次循环放入异步队列中的函数就会依次打印出
js闭包--关于在for循环中每隔一秒打印一次
qq_36711388的博客
05-06 6468
上篇我们介绍了js闭包-关于在for循环中绑定事件打印变量i 我们可以将结果一次性打印出0 1 2 3 4，那么下面我介绍一下每隔一秒钟一次打印出 0 1 2 3 4 1000*i是重点 es5方法: for (var i = 0; i < 5; i++) { (function (j) { setTimeout(function() { console.log(new...
采用自执行的匿名函数解决for循环使用闭包的问题
01-21
这段代码输出的是10个10而不是期望的0到9，因为闭包内是对i的引用，然后函数执行时i已经变成了10 function f1(){ for(var i = 0; i < 10; i++) { setTimeout(function() { alert(i); }, 1000); } } f1...
浅谈JavaScript for循环 闭包
01-19
有个网友问了个问题，如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。 <html > <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /&gt...
javascript闭包传参和事件的循环绑定示例探讨
12-08
今天看到一个javascript的题目，按常理循环绑定事件，但是得到的结果却不是想要的。 代码如下: <a>text</a> <a>link</a> [removed] var as = document.getElementsByTagName(‘a’); for ( var i = as.length; ...
js延迟打印for循环-闭包
步步错的博客
05-23 1976
js延迟打印for循环-闭包
javascript中for循环里面套定时器,始终打印结束值原因？
js_admin的博客
06-29 6534
for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 1000); } 由于变量 i 直接暴露在全局作用域内，当调用 console.log 函数开始输出时，这是循环已经结束，所以会输出10个10。这是我对题主问题的理解，希望能对题主有帮助，可能还有不完善的地方，我打算写篇博文好好总结下。
for 循环 同步异步输出 0 1 2 3 4 （闭包立即执行函数、let）
qq_25131799的博客
08-11 1537
// 1. for 循环 同步输出 0 1 2 3 4 for (var i = 0;i &lt; 5; i++){ console.log('1:' + i); // 0 1 2 3 4 } console.log(`console.log i:${i}`); // 5 // 2.for 循环 setTimeout 异步回调函数 不能异步输出 0 1 2 3 4 for (var...
用for循环打印
IT_in1314的博客
07-28 2097
用循环打印 * *** ***** ******* 代码如下： for i in range(1, 5): #表示打印4行* for j in range(1, 5-i): #每行打印前缩进 4-i 个空格 print(' ', end='') for k in range(2*i-1): #每行打印 2*i-1 个* print('*', end='') print() 运行结果如...
循环与闭包，期望每隔一秒打印递增数字
weixin_44019016的博客
10-30 556
for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } 上图，看起来，会输出 ，1，2，3，4，5，6 但实际是6个6 如果我们象下面这样写： for (var i=1; i<=5; i++) { (f...
for循环中的闭包问题
长歌的博客
09-11 4091
先看一段代码 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> var li=document.getElementsByTagName('li'); var len=li.length; for(v...
JS中使用for循环添加点击事件时，获取i值及参数异常原因及解决办法
大头之家
01-24 4727
遇见此问题,代码检查了n次都没毛病,但是却出现下述问题, 坑了我好久,原来是这个原因,记录避坑! PS这是js的处理方法, 在jquery中直接用each遍历元素绑定点击事件即可避免 $('#id').each(function(i){ $(this).click(function(){  alert(i); }); }); 转自 : https://
for循环中使用setTimeout打印多个同样的值 使用闭包 或者作用域解决
greed
10-31 282
需求 打印出0-5 for(var i=0;i<=5;i++){ setTimeout(() => { console.log(i); //6个6 }); } 使用作用域解决 把var换成let for(let i=0;i<=5;i++){ setTimeout(() => { console.log(i); // 0-5 }); } 使用闭包解决 自执行函数 for (var i
for 循环中使用函数导致的闭包问题解决——两种方式解决
yehaocheng520的博客
06-29 390
for循环中，如果给每个元素都使用函数进行处理的话，很可能出现闭包问题 简单的for循环代码 var arr = [0,1,2,3,4,5]; function fn(){ for(var i = 0;i<arr.length-1;i++){ console.log("索引",i); } } 控制台打印情况如下： for循环中加入setTimeout函数 var arr = [0,1,2,3,4,5]; function fn2(){ for(var i = 0;i<arr.le
for循环每隔一秒打印
最新发布
09-10
在JavaScript中，可以使用闭包和setTimeout来实现每隔一秒打印数字的功能。一种方法是使用立即执行函数和闭包。在循环中，通过立即执行函数传递当前的索引值，然后使用setTimeout函数在指定的时间后打印出相应的数字。这种方法可以避免因为JavaScript中的异步执行导致的问题。例如： ``` for (var i = 0; i < 5; i++) { (function(j) { setTimeout(function() { console.log(new Date(), j); }, 1000 * j); })(i); } ``` 另一种方法是使用ES6中的let关键字。let关键字创建的变量只在块级作用域内有效，并且每次循环会创建一个新的变量。这样就可以避免在setTimeout函数执行时获取到错误的值。例如： ``` for (let i = 1; i < 6; i++) { setTimeout(function() { console.log(i); }, 1000 * i); } ``` 以上是两种常见的实现方法，通过使用立即执行函数和闭包或者使用ES6中的let关键字，都可以实现每隔一秒打印出相应的数字。对于Python语言，使用for循环遍历数组，并依次打印出结果。具体的实现方法可以根据所使用的编程语言进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值