博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS闭包导致循环给按钮添加事件时总是执行最后一个
阅读量:6950 次
发布时间:2019-06-27

本文共 2014 字,大约阅读时间需要 6 分钟。

hot3.png

就是有不定个的按钮,且点击按钮时都需要执行一个方法(参数不一样)

那么我很自然的就想到了,循环给每个按钮添加事件和参数就好了,由于不方便上传系统代码,下面以一个简单例子来说明.

      
   闭包循环问题   
     p {background:red;}         
我是1号

  
我是2号

  
我是3号

  
我是4号

  
我是五号

  闭包循环问题

比如现在要实现这么一个功能,在页面上点击上面的按钮1到按钮5时分别alert出1,2,3,4,5.

那么很多人自然想到如下这么做:

加入如下脚本代码:

    var page = document.getElementsByTagName("p");for(var i=0; i

运行后,奇怪的发现无论点击那个li标签,alert出的都是最后一个的内容-"我是5号"

你不管点击哪一个,都alert”我是5号“;

原因就是你循环了五次产生了五个闭包,而这5个闭包共享一个变量i,说的明白一点就是,在for循环结束时,只是把这五个匿名函数注册给click事件,当时在循环的时候并没有执行,当循环结束了,此时i的值是5;之后你去点击p标签,你点击哪一个就执行哪一个对应的匿名函数(这个时候才执行),这时候匿名中发现一个i,匿名中没有定义i,于是沿着作用域链找,找到了,但是这时候循环早就结束了,i等于5,于是弹出”我是5号“来;点击其他的同理;

怎么解决呢

既然已经知道函数调用外部变量的时候就构成了一个闭包,里面的变量会受到别的地方的影响,那么我们

现在要做的就是,构建一个只有自己本身才可访问的闭包,保存只供本身使用的变量

构建一个闭包很简单,代码如下:

方式一:

方式二:

方法三:

闭包中的"this"对象:

为什么不弹出2呢,这里是说明闭包中你需要注意现在的this的指向那一个对象,其实记住一句话就永远不会用错this的指向问题,this永远指向调用它的作用域;

如果这样写你就可能理解了

其实是window对象调用的,this指的是windows,这就是说闭包中的this让你看不清this的指向;

要是让它alert 2你要这样:

其实,对于闭包没有太多的概念,也没有深入的去研究,把自己在项目中碰到的一个例子拿出来写写:

具体页面展示是这样的:循环生成动态菜单,然后给每个生成的菜单添加对应的onclick事件,

162754_DDL5_2331760.png

在代码中是这么写的:

html:代码
导出         
          
          
导出Excel                    
到工程//在"findItem"中是根据div中的文本来的查找的            
                  JS代码:$.post(url,data,function(data){    if (data.rows && data.total>0) { var menubutton = $($('#bb').menubutton('options').menu);//获得下拉菜单的button var menu = menubutton.menu('findItem','到工程');//获得菜单项'到工程',这个是div的名字 for(var i=0;i

开始的写法是:

onclick:function(){accoToCprj(console.info(i);data.rows[i].id,data.rows[i].name);}

怎么测试,发现弹出来的都是2,一直摸不着头脑,网上搜了一下,才发现问题,因为生成菜单后,点击触发onclick事件,就会执行accoToCprj()方法,因为此时i已经不是0,也不是1,而是2,因为在循环过程中,在i=0,i=1的时候生成两个菜单,然后i=2的时候跳出循环了,所以在触发onclick的时候,此时找到的i=2,所以一直弹出的是"2",于是在网上面找资料,把变量i存储起来,在单击的时候,返回一个函数,该返回的函数中可以调用这个闭包中的变量i...在新写的函数中,发现弹出的是0,1,总算正确了...

转载于:https://my.oschina.net/u/2331760/blog/419620

你可能感兴趣的文章
思科HyperFlex系统提供最完整的新一代超融合解决方案
查看>>
中国电信明确物联网技术路标:7月启动Cat1
查看>>
市场需求持续增长,云计算或将成为资本市场下一个焦点
查看>>
《 FreeSWITCH权威指南》——3.6 小结
查看>>
JMeter的基本介绍和入门(1)
查看>>
网络电话让毕业季不再有“情感真空”
查看>>
疑似微信企业版曝光 网友留言称“心疼阿里”
查看>>
高通每天提供超过一百万颗芯片 助力物联网发展
查看>>
Python Selenium的js扩展实现
查看>>
全球最大规模窄带物联网智慧水务商用项目在福州启动
查看>>
iDTRONIC推出RFID平板和手持移动设备
查看>>
圆通速递率先推出隐形面单 为个人信息安全再添安全锁
查看>>
当200亿个物联网设备同时产生数据 是时候重新认识传感器了
查看>>
深度专访:深谈的故事 (LinuxDeepin)
查看>>
《构建高可用Linux服务器 第3版》—— 1.2 全面了解Linux服务器
查看>>
《开放复杂智能系统——基础、概念、分析、设计与实施》—第1章1.5节 小结...
查看>>
《测试驱动数据库开发》——2.4 增量构建
查看>>
网站图片优化你需要知道的地方
查看>>
《计算机科学概论》—第3章3.4节音频数据表示法
查看>>
深入理解Java内存模型(一)——基础
查看>>