Вызов функции каждые x секунд в requestAnimationFrame

Question

Я работаю над каким-то личным проектом Three.js. Я использую функцию requestAnimationFrame. Я хочу вызвать функцию каждые 2 секунды. Я искал, но не нашел ничего полезного.

Мой код выглядит так:

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

Любая идея?

Answer 1

requestAnimationFrame проходит один параметр для обратного вызова, который указывает текущее время (в мс), когда requestAnimationFrame срабатывает обратный вызов. Вы можете использовать его для расчета интервала времени между 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

С requestAnimationFrame вы получите доступный кадр в 60 кадрах в секунду (если ваш браузер может не отставать от него), кажется, что вы должны ждать 2 секунды и запросить фрейм. Таким образом, браузер даст вам кадр именно после этих 2-х секунд, что в большинстве случаев будет мгновенно:

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

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

Answer 3

У меня была аналогичная проблема, и пришли к этому решению:

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

P.S. 120 - это не секунды, а рамки.