for 循环中实现多个点击事件 原
<script type="text/javascript"> function buttonInit(){ for(var i=1;i<4;i++){ var b=document.getElementById("button"+i); b.addEventListener("click",function(){ alert("Button"+i);},false); } } window.onload=buttonInit; </script> </head> <body> <button id="button1">Button1</button> <button id="button2">Button2</button> <button id="button3">Button3</button> </body> </html> 全部弹出button4 当注册事件结束后，i的值是4，当点击按钮时，事件函数function(){alert("button"+i)}这个匿名函数中没有i, 所有到buttonInit函数中找，此时的i为4，所有弹出button4 （但是此时确实是点击不同的按钮，只是都显示i=4）修改如下： <script> function buttonInit(){ for(var i=1;i<4;i++){ (function (arg) { var b=document.getElementById("button"+i); b.onclick=function(){alert("Button"+arg);}; })(i); } } window.onload=buttonInit; </script> js改成如上可以弹出button1 ,button2 , button3 另一个例子 for(var i=0;i<3;i++){ setTimeOut(function(){ console.log(i) },500) }; 执行结果：3，3,3 所以上述函数应该写成： for(var i=0;i<3;i++){ （function(i){ setTimeOut(function(){ console.log(i) },500); })(i); } 另一种修改方法：把var改成let即可 for(let i=0;i<3;i++){ setTimeOut(function(){ console.log(i) },500) }; 这种情况创建了太多的定时器，如果i值非常大，会非常消耗资源，大大降低执行性能,优化如下，始终只有一个定时器 let i = 0; let time = setInterval(output, 1000) function output() { if (i < 10) { console.log(i) console.log(time) i++ } else { clearInterval(time) } } 如果自定义参数 let i = 0; let time = setInterval(function() {output(8)}, 1000) function output(num){ if (i < num) { console.log(i) i++ } else { clearInterval(time) } } </script>
(adsbygoogle = window.adsbygoogle || []).push({});
腾讯云开发者
