Javascript function question

Question

I searched but couldn't find an answer to this seemingly easy question, so...

Suppose I have a loop in which I need to set callbacks. My callback function looks like this:

function callback(var1) { // code }

Now my loop is something like this:

for( //condition)
{
  var x = something_different_each_time;
  document.getElementById('foo').addEventListener('click', function() { callback(x); }, false);
}

Now it looks like even if the loop runs n times, the anonymous function is compiled only once -- and hence every invocation of callback is called with the same argument (even though x varies in the loop every time).

I must be missing something here.. any help is greatly appreciated! :)

Similar questions: stackoverflow.com/questions/1734749 stackoverflow.com/questions/643542 stackoverflow.com/questions/1582634 stackoverflow.com/questions/1331769 stackoverflow.com/questions/1552941 stackoverflow.com/questions/750486 stackoverflow.com/questions/933343 stackoverflow.com/questions/1579978 stackoverflow.com/questions/1413916 — Christian C. Salvadó
– Christian C. Salvadó, Commented May 21, 2010 at 7:57
that is a comprehensive list @CMS. It would be nice to tag these questions with "closures" and "loops", so they can all be linked with a simple search. — Anurag
– Anurag, Commented May 21, 2010 at 8:01
done, all questions are tagged "javascript", "closures", and "loops". Here's the link - stackoverflow.com/questions/tagged/javascript+closures+loops — Anurag
– Anurag, Commented May 21, 2010 at 8:07
@Anurag, I just visited the SO homepage at the time you started to retag, and thought I had discovered some kind of clever, nefarious hacker as the front page was suddenly full of nearly identical questions by different posters. Then I noticed you were listed as the last active poster on each, and found my way here from the Activity tab on your profile. Joke's on me, but it sure looked fishy at first! — eyelidlessness
– eyelidlessness, Commented May 21, 2010 at 8:22
@CMS.. you're welcome. this is a very common issue, nice to have all answers consolidated! — Anurag
– Anurag, Commented May 21, 2010 at 8:23

Christian C. Salvadó · Accepted Answer · 2010-05-21 07:51:41Z

2

The problem is that the block of the for statement doesn't creates a new scope, for that, the x variable belongs to its enclosing scope, and all anonymous functions refer to the same variable...

Use another function to create a new lexical environment to hold the value of x on each iteration:

for(/*condition*/) {
  var x = something_different_each_time;
  document.getElementById('foo').addEventListener('click', function () {
    return function(y) {
      callback(y);
    };
  }(x), false);
}

answered May 21, 2010 at 7:51

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

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

3 Comments

deceze Over a year ago

I think you're missing some braces around your anonymous function expression there.

Christian C. Salvadó Over a year ago

@deceze: Nope, the parentheses are required only when the function is on a place where it can cause a grammatical ambiguity between a function expression and a function declaration, in this case, the function is in the arguments list of a function call, it's clearly on expression context, no ambiguity... e.g.: (function (fn) { fn();})( function () {alert ('hi');} );

Christian C. Salvadó Over a year ago

@deceze: maybe a better example: var foo = function () { return 'bar'; }(); the function is invoked without problems... foo === 'bar';

Community · Accepted Answer · 2017-05-23 12:13:27Z

2

See Creating closures in loops: A common mistake

and related questions:

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered May 21, 2010 at 7:50

Anurag

142k37 gold badges223 silver badges262 bronze badges

Comments

Kunal · Accepted Answer · 2010-05-21 07:48:24Z

1

You should calculate x before calling your callback functin!

for( //condition)
{
  //var x = something_different_each_time;
  document.getElementById('foo').addEventListener('click', function() { 
   var x = something_different_each_time;
   callback(x); }, false);
}

answered May 21, 2010 at 7:48

Kunal

3622 silver badges8 bronze badges

1 Comment

ragebiswas Over a year ago

This is not really the problem. Thanks anyway.

deceze · Accepted Answer · 2010-05-21 08:00:08Z

0

Yes, the x will refer to the same variable in the enclosing scope, and since the function is executing later, it'll have the last value of x. Try this:

.addEventListener(
    'click',
    (function (i) {
        return function () { callback(i); }
    })(x),
    false
);

This creates a closure with the current value of x locked inside.

edited May 21, 2010 at 8:00

answered May 21, 2010 at 7:54

deceze♦

525k89 gold badges806 silver badges954 bronze badges

Collectives™ on Stack Overflow

Javascript function question

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related