You either need to create a reference or wrap the function call in another function like so: mainFunc: function(x) { anim.update(x); anim.redraw(x); window.requestAnimationFrame(function() { anim.mainFunc(x); }); }
What about something like this: function animate() { setTimeout( function() { requestAnimationFrame( animate ); }, 1000 / 30 ); renderer.render(); }
Do not use new Date() This API has several flaws and is only useful for getting the current date + time. Not for measuring timespans. The Date-API uses the operating system’s internal clock, which is constantly updated and synchronized with NTP time servers. This means, that the speed / frequency of this clock is sometimes … Read more
Question 1 window.onscroll = function() { console.log(‘scrolling’); }; or if your targeted browsers support addEventListener : window.addEventListener(‘scroll’, function() { console.log(‘scrolling’); }); Question 2 In my opinion, if you’re just scrolling from one section to a another section of your page, and not having some sort of constantly running scrolling movement, you’re fine doing this without … Read more
Warning! This question is not about the best way to shim requestAnimFrame. If you are looking for that, move on to any other answer on this page. You got tricked by automatic semicolon insertion. Try this: window.requestAnimFrame = function(){ return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback){ … Read more
I don’t think any of these answers really explained what I was looking for: “do n calls to requestAnimationFrame” get debounced (i.e. dequeued 1 per frame) or all get invoked in the next frame. When callbacks queued by requestAnimationFrame() begin to fire multiple callbacks in a single frame (mdn) This suggests the latter, multiple callbacks … Read more
In ticket #9381 you can read why they stopped using requestionAnimationFrame after some time. To summarize, problems were that animations didn’t run (browsers try to reduce CPU load) when window didn’t have focus, which is OK if the window is hidden, but not if it is visible, just out of the focus. Furthermore, animation queues … Read more
Although this question is a little bit older, I want to answer it because I often see scripts, where a lot of these techniques are misused. In general all your asked tools (rAF, rIC and passive listeners) are great tools and won’t vanish soon. But you have to know why to use them. Before I … Read more
How to throttle requestAnimationFrame to a specific frame rate Demo throttling at 5 FPS: http://jsfiddle.net/m1erickson/CtsY3/ This method works by testing the elapsed time since executing the last frame loop. Your drawing code executes only when your specified FPS interval has elapsed. The first part of the code sets some variables used to calculate elapsed time. … Read more