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.