js for循环输出i为同一值得问题
来源:互联网 发布:unity3d 麻将桌 编辑:程序博客网 时间:2024/06/06 00:49
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>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script type="text/JavaScript">
window.onload=function() {
var ps = document.getElementsByTagName("p");
for( var i=0; i<ps.length; i++ ) {
ps[i].onclick = function() {
alert(i);
}
}
}
</script>
</body>
</html>
此时点击任意p弹出的都是5
出现原因:js事件处理器在线程空闲时间不会运行,导致最后运行的时候输出的都是i最后的值,即:5
2、解决办法:使用闭包将变量i的值保护起来。
//sava1:加一层闭包,i以函数参数形式传递给内层函数
for( var i=0; i<ps.length; i++ ) {
(function(arg){
ps[i].onclick = function() {
alert(arg);
};
})(i);//调用时参数
}
//save2:加一层闭包,i以局部变量形式传递给内存函数
for( var i=0; i<ps.length; i++ ) {
(function () {
var temp = i;//调用时局部变量
ps[i].onclick = function() {
alert(temp);
}
})();
}
//save3:加一层闭包,返回一个函数作为响应事件(注意与3的细微区别)
for( var i=0; i<ps.length; i++ ) {
ps[i].onclick = function(arg) {
return function() {//返回一个函数
alert(arg);
}
}(i);
}
//save4:将变量 i 保存给在每个段落对象(p)上
for( var i=0; i<ps.length; i++ ) {
ps[i].i = i;
ps[i].onclick = function() {
alert(this.i);
}
}
//save5:将变量 i 保存在匿名函数自身
for( var i=0; i<ps.length; i++ ) {
(ps[i].onclick = function() {
alert(arguments.callee.i);
}).i = i;
}
}
//save6:用Function实现,实际上每产生一个函数实例就会产生一个闭包
for( var i=0; i<ps.length; i++ ) {
ps[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例
}
//save7:用Function实现,注意与6的区别
for( var i=0; i<ps.length; i++ ) {
ps[i].onclick = Function('alert('+i+')');
}
- js for循环输出i为同一值得问题
- js for循环输出i为同一值得问题
- 浅谈js for循环输出i为同一值的问题
- JS中for循环输出同一变量值的问题
- 调试技巧:让断点停在for循环中i为某个值得时候
- 调试技巧:让断点停在for循环中i为某个值得时候
- JS 闭包问题- for循环取 i
- js,在循环中添加事件,输出循环数 i 的值,i++与++i的问题
- js:利用for循环,循环输出HelloWord
- js for循环倒序输出数组元素
- JS的for循环总是弹出最后一个值得解决方法
- for循环中的i变量问题
- for in 循环的输出顺序问题
- js中for定时输出循环输出某一数组
- JS for循环结束后i的值
- 利用for循环将十进制数字转换为二进制并输出
- JS中for循环优化问题
- js for循环中加settimeout问题
- LINUX之文件系统目录结构
- 说明
- [学习笔记]C#继承与多态
- Oracle更改数据文件位置
- 2017ACM暑假俱乐部第一场H题 wtaxi
- js for循环输出i为同一值得问题
- TensorFlow之windows离线安装
- form表单序列化时缺少一些下拉框字段的原因
- 【备忘】Java菜鸟到大牛学习路线培训教程
- 加载——水位上移效果
- html获取当前经纬度
- Redis配置及密码修改等
- Java工程师的一些面试总结(4)
- Linux中more和less命令用法