闭包循环问题--for循环只显示最后一个i的值

Posted 2020-09-01 葫芦娃~葫芦娃

<div>DIV 0</div>
<div>DIV 1</div>
<script>
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        divs[i].addEventListener("click",function(){
            alert("divs #" +i+ "was clicked.");
        },false);
    }
</script>

这段代码主要用来操作2个div,哪个div被点，然后弹出框提示第i个div被点;

问题是：无论点哪个div,弹出框提示的始终都是第二个div被点了。

以上代码中遇到了一个使用闭包和循环时常见的问题，也就是说函数绑定之后，闭包抓取的变量被更新了。这意味着，每一个绑定的函数处理程序都会一直显示i最后的值；

 

处理代码如下

<div>DIV 0</div>
<div>DIV 1</div>
<script>
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) (function(n){
        divs[n].addEventListener("click",function(){
            alert("div #" +n+ "was clicked.");
        },false);
    })(i);
</script>

<div>DIV 0</div>
<div>DIV 1</div>
<script>
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) (function(n){
        divs[n].addEventListener("click",function(){
            alert("div #" +n+ "was clicked.");
        },false);
    })(i);
</script>

加入一个即时函数，注意 for (var i = 0; i < divs.length; i++) 后面的代码的写法(即时函数的写法)。

fo循环里，i的值变化，n的值也会跟着变化。

通过在for循环内加入即时函数，我们可以将正确的值传递给即时函数，进而让处理程序也得到正确的值。这意味着，在for循环每次迭代的作用域中，i变量都会重新定义，从而给click处理程序的闭包传入我们期望的值。