How to capture variables for async functions in a coffeescript loop?

Question

I am looping over an object and trying to add an onclick event for each button that corresponds to each item in the object.

for id of obj
    button = $("#my_button"+ id)
    button.click(->  console.log id)

With this loop, every button logs the last id of the loop. How do I get each button to log the proper corresponding id?

Trevor Burnham · Accepted Answer · 2011-09-23 15:27:47Z

9

It's a classic JavaScript problem. The standard solution is to wrap each loop iteration in an anonymous function, and pass id in to that function; that way, the function you're passing to click will see that particular id instance.

CoffeeScript provides a nice syntax for this purpose: do (id) -> ... compiles to (function(id){ ... })(id). So, for your example, you'd write

for id of obj
  do (id) ->
    button = $("#my_button"+ id)
    button.click(->  console.log id)

I talk about do in my article A CoffeeScript Intervention.

answered Sep 23, 2011 at 15:27

Trevor Burnham

77.5k33 gold badges165 silver badges200 bronze badges

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

Collectives™ on Stack Overflow

How to capture variables for async functions in a coffeescript loop?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related