Call a function each x second in requestAnimationFrame
I had a similar problem and came up with this solution:
let i = 0
function render() {
if (++i % 120 == 0) doSomething()
requestAnimationFrame(render)
}
P.s. 120
is not seconds but frames.
Since requestAnimationFrame
will give you an available frame in 60fps (if your browser can keep up with it) it seems perfectly fine to wait 2 seconds and request a frame. This way the browser will give you a frame exactly after these 2 seconds, which in most cases will be in an instant:
function render() {
// each 2 seconds call the createNewObject() function
createNewObject();
renderer.render(scene, camera);
}
setInterval(function () {
requestAnimationFrame(render);
}, 2000);
requestAnimationFrame
passes single parameter to your callback which indicates the current time (in ms) when requestAnimationFrame
fires the callback. You can use it to calculate time interval between render()
calls.
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);
}