StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Warning! This question is not about the best way to shim</strong> <code>requestAnimFrame</code><strong>. If you are looking for that, move on to any other answer on this page.</strong></p> <hr> <p>You got tricked by automatic semicolon insertion. Try this:</p> <pre><code>window.requestAnimFrame = function(){ return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback){ window.setTimeout(callback, 1000 / 60); } ); }(); </code></pre> <p>javascript automatically puts a semicolon behind your <code>return</code> statement. It does this because it is followed by a newline and the next line is a valid expression. In fact it gets translated to:</p> <pre><code>return; window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback){ window.setTimeout(callback, 1000 / 60); }; </code></pre> <p>This code returns <code>undefined</code> and never executes the code behind the return statement. So <code>window.requestAnimFrame</code> is <code>undefined</code>. When you call it in <code>animloop</code>, the javascript produces an error and stops execution. You can solve the problem by enclosing the expression in parentheses.</p> <p>May I recommend the Chrome developer tools or firebug to inspect javascript execution. With these tools you would have seen the error. You should go about debugging it as follows (I'm assuming Chrome):</p> <ol> <li>Execute the code (it produces unexpected results)</li> <li>Open the developer tools (right click -> Inspect Element) You will see a red x in the status bar at the right (this means there is an error in the execution)</li> <li>Open the console tab</li> <li>You will see <blockquote>Uncaught TypeError: Property 'requestAnimFrame' of object [object DOMWindow] is not a function</blockquote></li> <li>Type in the console: <code>window.requestAnimFrame</code> and press enter, you will see it is <code>undefined</code>. By now you know that the problem is in fact unrelated to <code>requestAnimationFrame</code> and that you should concentrate on the first part of your code.</li> <li>Now it is a matter of narrowing down the code up to the point where it returns something. This is the difficult part and if you still don't find it at this point you might want to turn to the internet for more help.</li> </ol> <p>Also, watch <a href="http://www.youtube.com/watch?v=hQVTIJBZook" rel="noreferrer">this video</a> for some good practices in writing javascript, He also mentions the evil automatic semicolon insertion.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload