zoukankan      html  css  js  c++  java
  • Function in loop and closure(转载)

    This article describe the famious issue “function in loop and closure” in JavaScript.

    The root cause is loop statements (such as for, while) don’t have their own scope.

    Let’s see an example first:

        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
        var liNodes = document.getElementsByTagName("li");
        for (var i = 0; i < liNodes.length; i++) {
            liNodes[i].onclick = function() {
                alert("You click item " + i);
            };
        }

    Now, if you click each of the list, all will produce a “You click item 3″ alert
    box.

    The number 3 comes out of the end execution of the loop (0, 1, 2 and out of the
    loop i === 3).

    Obviously, the result is not expected.

    If you use JSLint to validate this piece of code, you will get the following warning:

    Be careful when making functions within a loop. Consider putting the function in
    a closure.

    According to JSLint’s suggest, we have the first solution:

        // GOOD - 0
        function clickNode(liNode, i) {
            liNode.onclick = function() {
                alert("You click item " + i);
            };
        }  
    
        var liNodes = document.getElementsByTagName("li");
        for (var i = 0; i < liNodes.length; i++) {
            clickNode(liNodes[i], i);
        }

    If you don’t want to create another function, consider using anonymous funtion:

        // GOOD - 1
        var liNodes = document.getElementsByTagName("li");
        for (var i = 0; i < liNodes.length; i++) {
            (function(i) {
                liNodes[i].onclick = function() {
                    // You click item 0
                    // You click item 1
                    // You click item 2
                    alert("You click item " + i);
                };
            })(i);
        }

    Notice: The self-executing function create a context scope which contains a local
    variable i.

    When the click event occurs, the variable i is coming from the closure which is
    just the self-executing function scope.

    There are many ways to solve this problem, following are another three ways:

        // GOOD - 2
        var liNodes = document.getElementsByTagName("li");
        $.each(liNodes, function(i, item) {
            $(item).click(function() {
                // You click item 0
                // You click item 1
                // You click item 2
                alert("You click item " + i);
            });
        });  
    
        // GOOD - 3
        $("li").each(function(i, item) {
            $(item).click(function() {
                // You click item 0
                // You click item 1
                // You click item 2
                alert("You click item " + i);
            });
        });  
    
        // PREFERED - 4
        var liNodes = $("li").click(function(event) {
            var i = liNodes.index(this);
            // You click item 0
            // You click item 1
            // You click item 2
            alert("You click item " + i);
        });

    转自:http://www.cnblogs.com/sanshi/archive/2009/06/30/1514065.html

  • 相关阅读:
    基于poi的Excel文件导出(简单表头、固定模板)
    maven 程序包sun.plugin.util不存在
    基于poi的Excel文件导出(固定表头、固定模板)
    java.lang.NoClassDefFoundError: org/apache/poi/ss/usermodel/Workbook
    String字符串转List<JavaBean>
    spring项目打包,包含java下的各种配置文件
    代理客户端请求本地调试方法
    故障排除:"log file sync"等待 (文档 ID 1626301.1)
    package.json-属性详解
    excel 制作图加入latex
  • 原文地址:https://www.cnblogs.com/johnwonder/p/1688909.html
Copyright © 2011-2022 走看看