How to stop a requestAnimationFrame recursion/loop?

javascript html fullscreen webgl three.js

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:

Show code snippet

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>

Expand snippet