Defining anonymous functions in a loop including the looping variable?

Question

I know that this code doesn't work and I also know why. However, I do not know how to fix it:

JavaScript:

var $ = function(id) { return document.getElementById(id); };
document.addEventListener('DOMContentLoaded', function()
{
    for(var i = 1; i <= 3; i++)
    {
        $('a' + i).addEventListener('click', function()
        {
            console.log(i);
        });
    }
});

HTML:

<a href="#" id="a1">1</a>
<a href="#" id="a2">2</a>
<a href="#" id="a3">3</a>

I want it to print the number of the link you clicked, not just "4". I will prefer to avoid using the attributes of the node (id or content), but rather fix the loop.

Coffeescript has the very handy do keyword just for this kind of situation. — Jakub Hampl
– Jakub Hampl, Commented Nov 30, 2011 at 23:57

Wayne · Accepted Answer · 2014-03-20 20:21:44Z

5

Wrap the loop block in its own anonymous function:

document.addEventListener('DOMContentLoaded', function()
{
        for(var i = 1; i <= 3; i++)
        {
            (function(i) {
                $('a' + i).addEventListener('click', function() {
                    console.log(i);
                })
            })(i);
        }
}

This creates a new instance of i that's local to the inner function on each invocation/iteration. Without this local copy, each function passed to addEventListener (on each iteration) closes over a reference to the same variable, whose value is equal to 4 by the time any of those callbacks execute.

edited Mar 20, 2014 at 20:21

answered Nov 30, 2011 at 23:54

Wayne

60.5k15 gold badges135 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam Rackis · Accepted Answer · 2011-12-01 00:00:57Z

3

The problem is that the inner function is creating a closure over i. This means, essentially, that the function isn't just remembering the value of i when you set the handler, but rather the variable i itself; it's keeping a live reference to i.

You have to break the closure by passing i to a function, since that will cause a copy of i to be made.

A common way to do this is with an anonymous function that gets immediately executed.

        for(var i = 1; i <= 3; i++)
        {
            $('a' + i).addEventListener('click', (function(localI)
            {
                return function() { console.log(localI); };
            })(i);
        }

Since you're already using jQuery, I'll mention that jQuery provides a data function that can be used to simplify code like this:

        for(var i = 1; i <= 3; i++)
        {
            $('a' + i).data("i", i).click(function()
            {
                console.log($(this).data("i"));
            });
        }

Here, instead of breaking the closure by passing i to an anonymous function, you're breaking it by passing i into jQuery's data function.

edited Dec 1, 2011 at 0:00

answered Nov 30, 2011 at 23:54

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

2 Comments

Tyilo Over a year ago

I wasn't using jQuery just the basic $ = document.getElementById ;)

Adam Rackis Over a year ago

I was wondering why you were doing $('a' + i).addEventListener instead of $('a' + i).click -- oh well, some superfluous jQuery info :)

Ed Swangren · Accepted Answer · 2011-11-30 23:56:39Z

0

The closure captures a reference to the variable, not a copy, which is why they all result in the last value of the 'i'.

If you want to capture a copy then you will need to wrap it in yet another function.

answered Nov 30, 2011 at 23:56

Ed Swangren

125k24 gold badges189 silver badges271 bronze badges

Collectives™ on Stack Overflow

Defining anonymous functions in a loop including the looping variable?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related