for 循环中实现多个点击事件

时间 2019-11-24

标签循环实现多个点击事件繁體版

原文原文链接

<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 , button3javascript

另外一个例子html

for(var i=0;i<3;i++){java

setTimeOut(function(){函数

console.log(i)性能

},500)优化

};htm

执行结果：3，3,3事件

因此上述函数应该写成：ip

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>