浅谈js for循环输出i为同一值的问题


Posted in Javascript onMarch 01, 2017

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为同一值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Bootstrap Table从零开始
Jun 30 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 #Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 #Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 #Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 #Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 #Javascript
AngularJS constant和value区别详解
Feb 28 #Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python获取指定时间差的时间实例详解
2017/04/11 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
金融专业大学生自我评价
2014/01/09 职场文书
酒店总经理助理职责
2014/02/12 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
初三毕业评语
2014/12/26 职场文书
土地租赁协议书
2015/01/29 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
年会主持人开场白台词
2015/05/29 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Python实现机器学习算法的分类
2021/06/03 Python