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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。