zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    3 面向过程与面向对象进一步比较
    2 类、实例、属性、方法详解
    1 面向对象介绍
    CentOS5、6 NFS的安装配置及mount方法
    js 冒泡 捕获
    js定义类或对象
    new Option()——实现时间联动
    js闭包(转)
    (转)大型网站系统架构的演化
    30款最好的 Bootstrap 3.0 免费主题和模板
  • 原文地址:https://www.cnblogs.com/Arlar/p/6248653.html
Copyright © 2011-2022 走看看