Wywołanie funkcji co X sekund w requestAnimationFrame

Question

Pracuję nad osobistym projektem Three.js. Używam funkcji requestAnimationFrame. Chcę wywołać funkcję co 2 sekundy. Szukałem, ale nie mogłem znaleźć niczego przydatnego.

Mój kod to tak:

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

jakiś pomysł?

Answer 1

requestAnimationFrame przechodzi jeden parametr do swojego zwrotnego, który wskazuje aktualny czas (w ms) podczas requestAnimationFrame odpala wywołanie zwrotne. Możesz go użyć do obliczenia odstępu czasu między rozmowami 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 2

Od otrzymasz dostępną ramkę w 60 klatkach na sekundę (jeśli twoja przeglądarka może nadążyć za nią) wydaje się całkowicie w porządku czekać 2 sekundy i poprosić o ramkę. W ten sposób przeglądarka daje ramkę dokładnie po tych 2 sekund, co w większości przypadków będzie w jednej chwili:

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

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

Answer 3

miałem podobny problem i wyszedł z tego rozwiązania:

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

PS: 120 to nie sekundy, ale ramki.