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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM