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);
}