How to stop a requestAnimationFrame recursion/loop?

by

One way to start/stop is like this

var requestId;

function loop(time) {
    requestId = undefined;

    ...
    // do stuff
    ...

    start();
}

function start() {
    if (!requestId) {
       requestId = window.requestAnimationFrame(loop);
    }
}

function stop() {
    if (requestId) {
       window.cancelAnimationFrame(requestId);
       requestId = undefined;
    }
}

Working example:

const timeElem = document.querySelector("#time");
var requestId;

function loop(time) {
    requestId = undefined;
    
    doStuff(time)
    start();
}

function start() {
    if (!requestId) {
       requestId = window.requestAnimationFrame(loop);
    }
}

function stop() {
    if (requestId) {
       window.cancelAnimationFrame(requestId);
       requestId = undefined;
    }
}

function doStuff(time) {
  timeElem.textContent = (time * 0.001).toFixed(2);
}
  

document.querySelector("#start").addEventListener('click', function() {
  start();
});

document.querySelector("#stop").addEventListener('click', function() {
  stop();
});
<button id="start">start</button>
<button id="stop">stop</button>
<div id="time"></div>

More Related Contents:

  1. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  2. THREE.js Ray Intersect fails by adding div
  3. Drawing a line with three.js dynamically
  4. How to detect when a page exits fullscreen?
  5. Thickness of lines using THREE.LineBasicMaterial
  6. Run a website in fullscreen mode
  7. Multiple transparent textures on the same mesh face in Three.js
  8. How to get the absolute position of a vertex in three.js?
  9. Three.js / WebGL – transparent planes hiding other planes behind them
  10. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  11. How to detect collision in three.js?
  12. Three.js/WebGL: Large spheres appear broken at intersection
  13. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  14. How to save canvas animation as gif or webm?
  15. Antialiasing not working in Three.js
  16. Threejs: assign different colors to each vertex in a geometry
  17. Why do shaders have to be in html file for webgl program?
  18. Resizing an image in an HTML5 canvas
  19. In HTML5, is the localStorage object isolated per page/domain?
  20. How to prevent a click on a ‘#’ link from jumping to top of page?
  21. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  22. What is the meaning of polyfills in HTML5?
  23. How to prevent an HTTP request just for a favicon?
  24. Completely lost on how to save extension popup window content
  25. Center flex item in container, when surrounded by other flex items
  26. jQuery: How to listen for DOM changes?
  27. scrollIntoView vs moveToElement
  28. How can I remove wrapper (parent element) without removing the child?
  29. Polymer 1.0 Global Variables
  30. How to access css properties in javascript when applied via external CSS file?

Leave a Comment