Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I stop requestAnimationFrame

Tags:

I need to remove a canvas and build a new one. I'm having a problem where I don't know how to stop/interrupt the Three.js or webGL update process. I can stop it if I force a javascript error (but that's really stupid).

Does anyone know how to stop the process so that I don't start to pile processes that aren't doing anything useful or conflicting with the new ones?

like image 953
Hugo Alves Avatar asked Jan 22 '13 18:01

Hugo Alves


People also ask

What is the purpose of requestAnimationFrame?

requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

Should I use requestAnimationFrame?

To optimize system and browser resources, it is recommended to use requestAnimationFrame , which requests the browser to execute the code during the next repaint cycle. This allows the system to optimize resources and frame-rate to reduce unnecessary reflow/repaint calls.

Is requestAnimationFrame a Macrotask?

neither. requestAnimationFrame (rAF)'s callbacks are ... callbacks. Friendly reminder that there is no such thing as a "macrotask": there are "tasks" and "microtasks", the latter being a subset of the former.

Can you have multiple requestAnimationFrame?

Any requests registered before the execution of the next repaint gets added to the frame; there's no limit on how many requests can be included in each frame. The handle returned by requestAnimationFrame is a request ID, unique to that particular request, not a frame ID unique to the frame.


1 Answers

var id;  function animate() {      id = requestAnimationFrame( animate );      renderer.render( scene, camera );  } 

To cancel

cancelAnimationFrame( id ); 

three.js r.55

like image 178
WestLangley Avatar answered Sep 27 '22 20:09

WestLangley