for循环立即执行和不立即执行,js闭包

时间:2023-03-09 22:10:02
for循环立即执行和不立即执行,js闭包
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ /**for循环立即执行(i值挨个变化,已经执行),for循环里面的alert方法也立即执行(i值挨个变化,已经执行)**/
for (var i = 0; i < $("p").length; i++) {
alert(i);
} /**for循环立即执行(i值挨个变化,已经执行),for循环里面的点击事件不立即执行*(i值变成for循环终止值)*/
for (var i = 0; i < $("p").length; i++) {
//eq(i)立即执行,click事件里的方法不立即执行,每个对象发生点击事件时i都为值length
$("p").eq(i).click(function () {
alert($(this).index() + " ; index: " + i);
});
} /**解决方法1:将计数器改为用let声明**/
for(let i =0;i < $("p").length;i++){
$("p").eq(i).click(function(){
alert($(this).index() + " ; index: "+i);
});
} /**解决方法2:使用闭包**/
for (var i = 0; i < $("p").length; i++) {
$("p").eq(i).click(function (n) {
return function () {
alert($(this).index() + " ; index: "+ n);
}
}(i)); //此处i立即执行,将i作为click事件对应的处理函数的实际参数,并将内部处理过程return出来,迫使click里的两个function都立即执行
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>