javascript - loop - requestanimationframe vs setinterval

Llamar a una función cada x segundo en requestAnimationFrame

Question

Estoy trabajando en un proyecto personal de Three.js. Estoy usando la función requestAnimationFrame . Quiero llamar a una función cada 2 segundos. Busqué pero no pude encontrar nada útil.

Mi código es así:

function render() {
   // each 2 seconds call the createNewObject() function
   if(eachTwoSecond) {
      createNewObject();
   }
   requestAnimationFrame(render);
   renderer.render(scene, camera);
}

¿Alguna idea?

Answer 1

Dado que requestAnimationFrame le proporcionará un fotograma disponible en 60 fps (si su navegador puede seguirle el ritmo), parece perfectamente correcto esperar 2 segundos y solicitar un fotograma. De esta forma, el navegador le dará un marco exactamente después de estos 2 segundos, que en la mayoría de los casos será en un instante:

        function render() {
            // each 2 seconds call the createNewObject() function
            createNewObject();
            renderer.render(scene, camera);
        }

        setInterval(function () {
            requestAnimationFrame(render);
        }, 2000);

Answer 2

requestAnimationFrame pasa un solo parámetro a la devolución de llamada que indica la hora actual (en ms) cuando requestAnimationFrame la devolución de llamada. Puede usarlo para calcular el intervalo de tiempo entre las llamadas a render() .

var last = 0; // timestamp of the last render() call
function render(now) {
    // each 2 seconds call the createNewObject() function
    if(!last || now - last >= 2*1000) {
        last = now;
        createNewObject();
    }
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

Answer 3

Tuve un problema similar y se me ocurrió esta solución:

let i = 0
function render() {
   if (++i % 120 == 0) doSomething()
   requestAnimationFrame(render)
}

Ps 120 no es segundos sino cuadros.