js循环与局部变量的问题

weixin_39670158 2018-02-16 05:34:04
我想给第一个li 的onclick 弹出1 第二个弹出2
for(var i=0;i<cRes.length;i++){
cRes[i].onclick=function(){
alert("id为"+this.id+ "的编号为"+i);}
}
id是可以正常读取的,但是编号全部都是12,这是为什么?
...全文
342 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2018-02-16
  • 打赏
  • 举报
回复
循环结束了还能读到局部变量i也是因为闭包,与方案1中的闭包不同,是for循环所在的函数形成的闭包。 for循环和onclick事件没有实质性直接关联。为什么要把i赋给onclick
weixin_39670158 2018-02-16
  • 打赏
  • 举报
回复
引用 1 楼 jslang 的回复:

因为你需要在事件内使用事件外的循环变量i。
当事件触发时,那个循环早就结束了,那时的i的值已经是循环最大值加1了。
所以需要用一些方式保存住当前循环的i的值。
方案1为:用闭包保存住当前循环的i的值。
for(var i=0;i<cRes.length;i++) {
	(function(i){
		cRes[i].onclick=function(){
			alert("id为"+this.id+ "的编号为"+i);
		}
	})(i);
}

方案2为:用let块作用域变量,原理也是闭包(ie11以前不支持)
for(var i=0;i<cRes.length;i++) {
	let j = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+j);
	}
}

方案3为:在事件函数内不使用循环变量i,而是用this获取触发事件的元素
for(var i=0;i<cRes.length;i++) {
	cRes[i].index = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+this.index);
	}
}


当事件触发时,那个循环早就结束了 为什么循环结束了还能读到局部变量i 而不是udf? 循环过程中不是直接把i赋给onclick就可以了,为什么不这样做?这样的事件绑定机制或者说局部变量***有什么优缺点?
天际的海浪 2018-02-16
  • 打赏
  • 举报
回复

因为你需要在事件内使用事件外的循环变量i。
当事件触发时,那个循环早就结束了,那时的i的值已经是循环最大值加1了。
所以需要用一些方式保存住当前循环的i的值。
方案1为:用闭包保存住当前循环的i的值。
for(var i=0;i<cRes.length;i++) {
	(function(i){
		cRes[i].onclick=function(){
			alert("id为"+this.id+ "的编号为"+i);
		}
	})(i);
}

方案2为:用let块作用域变量,原理也是闭包(ie11以前不支持)
for(var i=0;i<cRes.length;i++) {
	let j = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+j);
	}
}

方案3为:在事件函数内不使用循环变量i,而是用this获取触发事件的元素
for(var i=0;i<cRes.length;i++) {
	cRes[i].index = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+this.index);
	}
}


87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧