Search code examples
javascriptthree.jsrequestanimationframe

Call a function each x second in requestAnimationFrame


I'm working on some personal project by Three.js. I'm using requestAnimationFrame function. I want to call a function each 2 seconds. I've search but I couldn't find anything useful.

My code is like this:

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

Any Idea?


Solution

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