<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 在页面添加三个按钮 -->
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<script>
// 获取页面所有的input
var aBtn = document.getElementsByTagName('input');
// 循环绑定点击事件,当然毫无疑问这里点击之后会弹出3，
//因为我们知道js是单线程的，当基本逻辑语句执行完之后，才会执行点击事件
//而当你触发点击事件的时候，for循环都已经跑完了，所以i已经变成了3；
for(var i = 0; i < aBtn.length; i++){
aBtn[i].onclick = function(){
alert(i);
}
}
// 解决方法1:也是最简单的方法，就是将for循环的var变成let
//这样当点击每个按钮的时候，就会依次弹出0,1,2；
//let是ES6新增的一个变量声明方式，拥有块级作用域；
for(let i = 0; i < aBtn.length; i++){
aBtn[i].onclick = function(){
alert(i);
}
}
//解决方法2：利用闭包(说是闭包，貌似也不完全是)，也就是函数作用域访问原则的特性
//函数内部可以访问外部的变量，外部却访问不了里边的；
for(var i = 0; i < aBtn.length; i++){
(function(i){
aBtn[i].onclick = function(){
alert(i);
}
})(i);
}
</script>
</body>
</html>
当然，这里也不仅仅局限于点击事件，也可以换成setTimeout等也有相同的问题，可以用这两种方法来解决；
网友评论