JS之经典for循环闭包问题解决方法

最新推荐文章于 2021-08-31 17:51:53 发布
最新推荐文章于 2021-08-31 17:51:53 发布
阅读量121 收藏
点赞数
原文链接：http://www.cnblogs.com/zhumingyong/p/8994636.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.css">

</head>
<body>
    <div class="container">
    <div class="row">
        <div class="col-md-3">
            <hr>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">闭包经典实例</h3>
                    <div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">1</li>
                                <li class="list-group-item">2</li>
                                <li class="list-group-item">3</li>
                                <li class="list-group-item">4</li>
                                <li class="list-group-item">5</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script >
        var liList=document.getElementsByTagName('li');

        for(var i=0;i<liList.length;i++){

            liList[i].number=i;
            liList[i].οnclick=function(){
                alert(this.number)
            }

//            (function (i){
//                liList[i].οnclick=function( ){
//                    alert('当前点击第'+ i+'个');
//                }
//            })(i)
        }
    </script>
</body>
</html>


像这样一个代码片段,初学者会理所当然地认为依次点击Li会弹出相应的0、1、2、3、4  但实际结果是每次都是4
原因是：每次点击输出i的时候，函数内部没有i,就从外部函数查找，而外部函数的值是每一次循环后的值4，所以每次点击输出的都是4

解决办法一：加一层闭包，i 以函数参数形式传递给内层函数：

          (function (i){
             liList[i].οnclick=function( ){
                  alert('当前点击第'+ i+'个');
              }
          })(i)

解决办法二：找个属性将i值保存起来，然后弹出这个值

        liList[i].number=i;
            liList[i].οnclick=function(){
                alert(this.number)
            }


转载于:https://www.cnblogs.com/zhumingyong/p/8994636.html

躲不过这哀伤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
for循环嵌套函数出现的类似于闭包的问题解决方法
morning__one的博客
08-05 567
#### 闭包的问题 闭包是指有权访问另一个函数作用域中的变量的函数。 问题例子： function demo() { var a = 0; function b(n) { a+=n; console.log(a); } return b(); } demo(1);//输出NaN demo(1);//输出NaN demo(1);...
for循环遍历失败的原因（闭包问题）附四种解决办法完整代码
willwe的博客
06-10 3521
for循环中的闭包问题 在for循环的使用中有时会遇到以下问题： <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> var li=documen
for 循环中使用函数导致的闭包问题——两种方式解决
qq_37833745的博客
08-31 2341
1:for循环中，如果给每个元素都使用函数进行处理的话，很可能出现闭包问题 var arr = [0,1,2,3,4,5]; function fn(){ for(var i = 0;i<arr.length-1;i++){ console.log("索引",i); } } 控制台输出结果： 2:for循环中加入setTimeout函数 var arr = [0,1,2,3,4,5]; function fn2(){ for(var i = 0;i<arr.l...
JavaScript闭包之for循环
weixin_34288121的博客
01-28 218
之前讲了最简单的闭包，然而闭包最经典的是那个for循环，几乎每一个想要理解闭包的都会遇到这个例子，每一个讲解闭包的也会举这个例子。我这次不是要讲这么解决这个for循环闭包问题，而是解释这个闭包。 <ul> <li>0</li> <li>1</li> <li>2</li> </ul&gt...
JS中如何理解经典案例 for 循环中的闭包
Leo____Wang的博客
04-28 2998
js关于for循环中的闭包问题？ for(var i=0,arr=[];i&lt;=3;i++) { arr.push(function(){alert(i)}); } arr0; // ?? 结果不是0 arr1; // ?? 全是4 改装后 for(var i=0,arr=[];i&lt;=3;i++) { arr.push( ...
采用自执行的匿名函数解决for循环使用闭包的问题
09-04
使用自执行匿名函数可以创建局部作用域，从而解决因闭包引用循环变量而导致的问题。这种技巧不仅适用于上述的`setTimeout`场景，还可以应用于其他类似的情况，如`setInterval`、事件处理程序或任何需要保留状态的...
javascript 常见的闭包问题的解决办法
10-29
总结来说，解决JavaScript中的闭包问题通常需要理解作用域和变量生命周期。当在循环中使用闭包时，要确保每个闭包有自己的变量副本，而不是共享同一个变量。通过使用IIFE或者将变量绑定到`this`或`let`关键字声明的...
浅谈JavaScript for循环 闭包
10-22
我们从描述和部分内容中看到，有多种方法可以解决闭包中for循环带来的问题。以下分别进行详细解释： 1. 将变量保存在每个段落对象上（即DOM元素）。 在循环中，我们不仅仅让每个p元素的onclick事件指向同一个匿名...
javascript循环变量注册dom事件 之强大的闭包
12-08
} 结果出现了问题，所有的dom都被注册了 i=n 的时候的事件，查了一些资料，说是在循环过程过this被改变，注册过的事件也被随之改变，找到了一种解决方法; 代码如下: for (var i=0; i<n; i++) { (function (i){...
JS 闭包问题- for循环取 i
u010565037的博客
03-24 871
问题描述： html lang="en"> head> meta charset="UTF-8"> title>title> script type="text/javascript">        functiononMyLoad(){        var arr = document.getElementsByTagName("p");        for(v
关于JavaScript闭包中for循环执行顺序(this和trs[i]问题)
十一的博客
07-21 1038
.over{ Background:red; } .out{ Background:white; } var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ trs[i].onmouseover= function(){ this.classN...
javascript数组对象for循环中突然出现闭包的解决方案
开心大表哥
04-08 5104
1.代码目的是：将后台返回的data数组对象通过setData函数写到全局数组itemArr中。但是下面的写法出错了！ &lt;script&gt; var data = [ {name:'小红',age:'18'}, {name:'小名',age:'19'}, {name:'小白',age:'20'}, ...
JS中的立即执行函数
weixin_30344795的博客
02-09 76
JS 立即执行函数可以让函数在创建后立即执行，这种模式本质上就是函数表达式(命名的或者匿名的)，在创建后立即执行。 1、立即执行函数的写法 立即执行函数通常有下面两种写法： (function(){ ... })(); (function(){ ... }()); //错误的写法 function (){ ... }();...
JavaScript的闭包问题
客栈
04-23 400
JavaScript是一种非常强大的函数式编程语言，可以动态创建函数对象。 由于JavaScript还支持闭包（Closure），因此，函数可以引用其作用域外的变量，非常强大。 来看看在JavaScript中使用闭包的陷阱： var tasks = []; for (var i=0; i<3; i++) { tasks.push(function() { conso
for循环中的闭包问题及解决方案
学无止境
08-07 5480
说到闭包，我们首先来看一个最最简单的例子，也是最最基础的例子：为多个相同的元素，绑定事件，在点击每一个元素时，提示被点击元素的排列位置。 栏目1 栏目2 栏目3 栏目4 拿到手的第一反应就是for循环添加点击事件了（添加索引值也可以！） 这里讨论闭包解决！（i=4   ，一直弹4，好烦！） function b
js关于for循环中的闭包问题
手牵手科技
04-04 647
因为js没有块级作用域for循环的循环体不是一个作用域你的第一段代码等效于以下展开 var arr=[]; var i=0; arr.push(function(){console.log(i);}); i++; arr.push(function(){console.log(i);}); i++; arr.push(function(){console.log(i);}); i++; arr....
JS基础 关于闭包在for循环中的使用
anzanli2393的博客
11-13 141
主要是针对ES5的语法，因为ES6中有块级作用域了（尽管我不知道为什么我还一直在用es5的语法） 先展示一段问题代码 1 for (var i = 0; i < data.length; i++) { 2 var $btn=$('#iBtn'); 3 $btn.on('click',function(e){ 4 alert(d...
js闭包与for循环
Ican_code的博客
05-09 1212
一般for循环是没什么问题的，比如：var a=[]; for(var i=0;i<5;i++){ a[i]=i; }但是当我们在for循环中添加函数的时候可能就会出错了，比如： var =[]; for(vari=0;i<5;i++){ a[i]=function(){ return i; }
解决easyui jQuery JS的for循环调用ajax异步问题
最新发布
05-25
解决这个问题的方法是使用闭包： ```javascript for (var i = 0; i ; i++) { (function (i) { $.ajax({ url: 'xxx', data: { id: items[i].id }, success: function (res) { // 处理返回结果 } }); })(i);...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值