代码示例
<div>
<input type="text" id="inp1" value="1"></input>
<input type="text" id="inp2" value="2"></input>
<input type="text" id="inp3" value="3"></input>
</div>
<script>
for(var i=1;i<=3;i++){
jQuery("#inp"+i).bindPropertyChange(function(){
var alert_value = $("#inp"+i).val();
alert("我是input"+i+",我的值是"+alert_value);
});
}
</script>
上述代码中,循环给每一个input绑定change事件,当相应的input发生变化时,弹出对应的value值。当我们给id为“inp1”修改为6时,按照逻辑应该会弹出6,但是实际情况是:
你可能会有疑问,为何我改的是input1的值,但弹出来的是input3的值呢?这就是JS中变量作用域问题了,由于JS的机制,在我们for循环绑定change事件后,触发其中某一个input的change事件时,随着for循环的结束,所获取的i为最后一位数,也就是3,所以这个时候根据id会去找input3的值~
那么如何解决这个问题呢?我们需要使用闭包函数解决这个问题。将绑定事件封装为一个函数,在for循环中调用绑定函数,传入相应的i,这个时候闭包会携带包含它的函数的作用域,函数中的变量都是独立存储内存中的,代码如下:
<script>
for(var i=1;i<=3;i++){
get_value(i);
}
function get_value(param){
$("#inp"+param).change(function(){
var alert_value = $("#inp"+param).val();
alert("我是input"+param+",我的值是"+alert_value);
});
``` }
</script>
再次运行,发现弹出的就是input1的值了~
今天被这个问题缠绕了许久,终于发现问题点,在此记录一下,防止下次掉坑。但是需要谨慎使用闭包,因为会大量消耗内存导致内存泄漏,或者导致网页卡顿等现象~