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

Question

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.

Steven Parker · Answer

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:

Welcome to the Treehouse Community

Looking to learn something new?

Emily Cain

Emily Cain

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

1 Answer

Steven Parker

Steven Parker