js初学者常遇到的一个for循环中onclick问题
2016-10-29 23:38
330 查看
首先看一段代码:
然后运行一下,当时作为一名天真的js初学者理所当然的认为分别点击不同的额按钮,会分别的打印出0、1、2、3、4,然而事与愿为,现实和理想总是存在差距,点击不同的按钮,打印却都是5,百思不得其解,不科学啊!
最后百度了一番才恍然大悟,原来console.log(i)里的i在循环完成的时候被赋值成了5,而每个按钮的onclick都被赋值了同一个function,也就是说每个function里的i指的是同一个i,i=5,自然每个点击都会打印出5,那么该怎么解决呢?!
再看接下来这段代码:
再运行这段代码,就可以得到你想要的效果,但是是为什么呢?
知道了原因就好办了,利用闭包把每个function里的i都变成不同的i就行了,当时作为一名初学者还不懂闭包,也是后来才理解的。
循环中的function自调用,将循环中的i作为参数传入function中,此时,function中的i已经不是循环中的i了(这里有点绕,其实形参i,即function里的i换成什么变量名都行),而是在内存中开辟了一个内存空间存储了作为参数传进来的i的值,这样function中的就不会随着循环中的i的值的改变而改变了,就可以打印出你要的结果了。
怎么样?是不是很坑爹,这是一个很常见的问题,还望js的初学者们好好体会,我当时也是蒙蔽了好久!!!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>0</button> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <script> var btn=document.getElementsByTagName('button'); for(var i=0;i<btn.length;i++){ btn[i].onclick=function(){ console.log(i); } } </script> </body> </html>
然后运行一下,当时作为一名天真的js初学者理所当然的认为分别点击不同的额按钮,会分别的打印出0、1、2、3、4,然而事与愿为,现实和理想总是存在差距,点击不同的按钮,打印却都是5,百思不得其解,不科学啊!
最后百度了一番才恍然大悟,原来console.log(i)里的i在循环完成的时候被赋值成了5,而每个按钮的onclick都被赋值了同一个function,也就是说每个function里的i指的是同一个i,i=5,自然每个点击都会打印出5,那么该怎么解决呢?!
再看接下来这段代码:
<script> var btn=document.getElementsByTagName('button'); for(var i=0;i<btn.length;i++){ (function(i){ //这个是function里i,即function的形参,也可以换成j,换成什么变量名都无所谓 btn[i].onclick=function(){ console.log(i); } })(i);//这是循环中的i,被作为参数传入 } </script>
再运行这段代码,就可以得到你想要的效果,但是是为什么呢?
知道了原因就好办了,利用闭包把每个function里的i都变成不同的i就行了,当时作为一名初学者还不懂闭包,也是后来才理解的。
循环中的function自调用,将循环中的i作为参数传入function中,此时,function中的i已经不是循环中的i了(这里有点绕,其实形参i,即function里的i换成什么变量名都行),而是在内存中开辟了一个内存空间存储了作为参数传进来的i的值,这样function中的就不会随着循环中的i的值的改变而改变了,就可以打印出你要的结果了。
怎么样?是不是很坑爹,这是一个很常见的问题,还望js的初学者们好好体会,我当时也是蒙蔽了好久!!!
相关文章推荐
- js的一个有意思的小题,闭包解决getElementByTagName的for循环绑定事件错误问题
- 遇到一个很有趣的问题,while(ture)或者for循环出现异常,继续执行还是跳出异常
- Generic Host Process for Win32 Services 遇到了一个问题,需要关闭
- js循环动态绑定带参数函数遇到的问题及解决方案[转]
- for循环里嵌套使用ajax遇到的问题
- 安装 Windows SDK for Windows 7 时遇到的一个问题及解决办法
- for循环中一个不容小觑的问题
- 今天再做上传图片时候遇到了一个JS 图片预览问题
- JS中for循环优化问题
- 遇到的一个JS原型的问题,已经解决
- 学习K&R时初学者经常遇到的一个问题——EOF
- JS之经典for循环闭包问题解决方法
- generic host process for win32 services 遇到了一个问题 需要关闭。
- for循环一个容易被忽视的问题
- 自己面试中遇到的for循环问题
- js 带循环的 嵌套函数 应注意的一个问题 循环index
- 关于C语言For循环的一个问题~!
- Generic Host Process for Win32 Services遇到了一个问题,需要关闭
- Generic Host Process for Win32 Services 遇到了一个问题,需要关闭
- 用for(PhantomReference ref:ref_array循环出ref时的一个问题