Function in loop and closure

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_34218890

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量79

点赞数

文章标签： javascript ViewUI

本文探讨了JavaScript中常见的闭包与循环问题，解释了为何循环内的匿名函数会在闭包环境中导致意料之外的行为，并提供了多种解决方法。

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);
    });