¿Cómo detener una recursión/bucle de requestAnimationFrame?

Hola usuario de nuestra web, hemos encontrado la solución a lo que buscas, deslízate y la hallarás un poco más abajo.

Solución:

Una forma de iniciar/detener es así

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;
    

Ejemplo de trabajo:

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();
);

start
stop

Detener es tan simple como dejar de llamar a requestAnimationFrame, y reiniciar es llamarlo nuevamente. ex)

        var pause = false;
        function loop()
                //... your stuff;
                if(pause) return;
                window.requestionAnimationFrame(loop);
        
       loop(); //to start it off
       pause = true; //to stop it
       loop(); //to restart it

Sugeriría echar un vistazo a la página de gibhub de polyfill de requestAnimationFrame. Hay discusiones sobre cómo se implementa esto.

Te mostramos reseñas y valoraciones

No se te olvide dar visibilidad a este ensayo si lograste el éxito.

---

---

Utiliza Nuestro Buscador