zoukankan      html  css  js  c++  java
  • 闭包循环问题--for循环只显示最后一个i的值

    <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++) 后面的代码的写法(即时函数的写法)。

    首先解释一下即时执行函数;

    (function(){})();
    
    简写(......)();

    第一对括号内是一个函数体(表达式),这对括号仅用于划定表达式的范围;
    第二对括号内是一个操作符,表示立即执行上面的表达式;而第二对括号内的值(如果有的话),就是执行上面表达式所需要的参数(也分实参、形参)

    fo循环里,i的值变化,n的值也会跟着变化(当然要变化啦,i是实参,n是形参)

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

  • 相关阅读:
    Django测试开发-36- xadmin模板中缩略图django-stdimage
    Django测试开发-35- xadmin模板中添加上传文件和图片功能
    Django测试开发-34- xadmin模板中添加action插件
    Django测试开发-33- xadmin模板中添加小组件报错
    Django测试开发-32- xadmin模板使用自定义菜单项
    Django测试开发-31- xadmin模板中choices使用
    序列化模块
    一大群模块
    python基础之内置函数和匿名函数
    python基础之迭代器和生成器
  • 原文地址:https://www.cnblogs.com/Jerry-spo/p/6438792.html
Copyright © 2011-2022 走看看