js for循环闭包解决循环变量i遍历值

参考：http://www.cnblogs.com/syf/archive/2012/10/04/2711828.html

如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。

[html] view plain copy print ?

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闭包演示</title>
<script type="text/javascript">
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body >
<p>产品一</p>
<p>产品二</p>
<p>产品三</p>
<p>产品四</p>
<p>产品五</p>
</body>
</html>

解决方式有两种，

1、将变量 i 保存给在每个段落对象（p）上

[javascript] view plain copy print ?

function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
}

2、将变量 i 保存在匿名函数自身

[javascript] view plain copy print ?

function init2() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(pAry[i].onclick = function() {
alert(arguments.callee.i);
}).i = i;
}
}

再增加3种

3、加一层闭包，i以函数参数形式传递给内层函数

[javascript] view plain copy print ?

function init3() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(arg){
pAry[i].onclick = function() {
alert(arg);
};
})(i);//调用时参数
}
}

4、加一层闭包，i以局部变量形式传递给内存函数

[javascript] view plain copy print ?

function init4() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function () {
var temp = i;//调用时局部变量
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}

5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）

[javascript] view plain copy print ?

function init5() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function(arg) {
return function() {//返回一个函数
alert(arg);
}
}(i);
}
}

又有一种方法

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

[javascript] view plain copy print ?

function init6() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例
}
}

再增加一种

7、用Function实现，注意与6的区别

[javascript] view plain copy print ?

function init7() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = Function(‘alert(‘+i+‘)‘)
}
}

时间： 2024-10-18 10:38:09

js for循环闭包解决循环变量i遍历值的相关文章

JavaScript利用闭包解决循环绑定事件

例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button></button> <button></button> <button></button> </body> <script type="text/javasc

前端（十三）—— JavaScript高级：回调函数、闭包、循环绑定、面向对象、定时器

回调函数.闭包.循环绑定.面向对象.定时器一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callback) { // 函数回调,判断回调函数是否存在 if (callback) callback(data); } func(callback); // 函数回调的本质:在一个函数中(调用函数),当满足一定条件,调用参数函数(回调函数) // 回调函数作为调用函数的参数传入,满足一定的条件,调用回调函数

浅谈js for循环输出i为同一值的问题（闭包解决）

1.最近开发中遇到一个问题,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> </head> <body> <p>1</p>

利用闭包解决for循环里onclick事件不能捕捉实时i值问题

问题描述我们都知道,如果我们对于一组元素(相同的标签)同时进行onclick事件处理的时候(在需要获取到索引的时候),一般是写一个for循环,但是onclick是一个异步调用的,所以会带来一个问题,当我们触发这个事件的时候,我们能获取的i值是for完整执行完后i的值,而不能获取到代码顺序里i的值首先看一段代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

百度地图API详解之事件机制，function“闭包”解决for循环和监听器冲突的问题：

原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日星期二下午 04:06 和DOM编程里的事件模型一样,百度地图API也提供了类似的事件机制.本文介绍了事件监听的添加和移除方法,this指针和事件参数的使用以及绑定事件监听函数中涉及的闭包问题,最后分享了一个用来增强地图API事件机制的开源项目. 事件添加和移除我们最简单的事件开始,下面的代码示例给map对象添加了click事件的监听

js的for循环闭包问题

一个简单的例子,如果想循环输出数组中的每一个数值我们可以利用for循环来输出例如: <script type="text/javascript"> var arr=["a","b","c","d","e"]; for (var i=0;i<arr.length;i++){ document.write(arr[i]); } </script> 这是最常见不过

经典面试题，循环中使用闭包解决 var 定义函数的问题--闭包

闭包的定义很简单:函数 A 返回了一个函数 B,并且函数 B 中使用了函数 A 的变量,函数 B 就被称为闭包. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>var定义函数出现的问题</title></head><body><script type="text/ja

JS闭包导致循环给按钮添加事件时总是执行最后一个

加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= list_obj.length; i++) { list_obj[i].onclick = function() { alert(i); } } </script> 运行后,奇怪的发现无论点击那个li标签,alert出的都是最后一个的内容,5 下面做下分析:因为在for循环里面指定给list_o

swift中闭包 OC中Block 解决循环引用

OC 中全局宏定义 #define WS(weakSelf) __weak __typeof(&*self)weakSelf = self; 用法如下: WS(weakself) [self.tableView addHeaderWithCallback:^{ [weakself requestMemberList]; }]; swift 在比闭包中使用 weakSelf weak var weakSelf = self demo4 { // 使用?的好处就是一旦 self 被释