Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Emily Cain
Emily Cain
5,850 Points

making sure I understand "var requestAnimFrame = x || y || z..."

I want to make sure I understand what's going on in Lines 8-16.

var requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000/60) };

Does the || mean that each of these window.(whatever) properties is returning false or unassigned until you run into the one that pertains to the browser in use?

Are the various browser-specific variables/values that can be assigned to requestAnimFrame functionally equivalent to the callback method at the end? Does that mean it's ok for those earlier values to be passed a callback they won't use?

Any further reading on these ideas would be appreciated. I feel like I can kind of puzzle through what's happening here but would never be able to write it myself.

1 Answer

Steven Parker
Steven Parker
229,981 Points

The chain of values separated by ||'s will return the first one that is not undefined (making them "falsey"). So if any of the browser-specific functions exist, that's the function that will be assigned to requestAnimFrame.

If none of them exist, requestAnimFrame will be assigned to a function that sets a timer for 1/60 second (the frame rate). This function is equivalent to the browser-specific animation functions except for the optimizations the browser-specific ones would provide.

And finally all of these functions take a callback function as a parameter.

I hope that makes it a bit clearer. Happy coding! ย  :sparkles: