This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Johannes Eckert
Posted Oct 29 - Read on Facebook

I have a simple(?) loop problem that I come across a lot.

I want to loop through an array and hand over the object to a delay function.
Example: Changing these 5 boxes in a sequence after each other.

for card,i in allcards
 Utils.delay 1*i+1, ->
  card.backgroundColor = Utils.randomColor()

unfortunately, the delay function only accesses the last card. How can I hand the correct card into the delay function?

http://cloud.eckert.io/2Z00062n0H1o

15 Comments

Johannes Eckert

issue in line 13 and line 24

Jordan Robert Dobson

fat arrows...keep context.

Johannes Eckert

how fat? => doesn't work
http://cloud.eckert.io/2Z00062n0H1o

Jordan Robert Dobson

We talked about this at our last meetup.

Here's the code: http://share.framerjs.com/nqeoakxnf8dd/

Jordan Robert Dobson

It just doesn't know what card is most likely after the loop is over. Does @.name work?

Andreas Wahlström

try passing card as an argument to the function that is executed on delay.

Marc Krenn

Johannes, have you figured it out? I couldn't, so I'd love to see the working file. Thanks :)

Jordan Robert Dobson

Wait so this isn't fixing the problem?

http://share.framerjs.com/253w5ls5jtja/

Aren't you trying to print card.name?

Maybe I am missing something?

Jordan Robert Dobson

Maybe I just saw the error on your click event inside the loop and focused there.

Johannes Eckert

SOLVED IT

Utils.delay is shorthand for underscore's _.delay
But it looks like Framer isn't forwarding all arguments into the delay function.

If I call _.delay directly, I can pass card into a function that manipulates the cards:
_.delay(changeCard, timedifference*1000, card)
http://underscorejs.org/#delay

http://share.framerjs.com/ezmm1wqj2ouy/

maybe something to look into Koen?

Jordan Robert Dobson

Here's how I solved it... http://share.framerjs.com/moromlxqcruu/

Tisho Georgiev

Change the `for ... in` loop to allcards.forEach:

allcards.forEach (card, i) ->
Utils.delay 1*i+1, ->
card.backgroundColor = Utils.randomColor()

Why it happens? Closures.

Jordan Robert Dobson

Just pass it to a function... that's an easy way to take a value out of that scope.

Vicky Yang

This is really fun! I was wondering how would you code to implement random images instead of colours?

Vicky Yang

Here is my attempt with images, but can't get it to work
http://share.framerjs.com/whul9yr6loum/
Help anyone?

Read the entire post on Facebook