Invoke a function at regular intervals using requestAnimationFrame

Question

Invoke a function at regular intervals using requestAnimationFrame

I'm currently working on a personal project using Three.js. In my code, I am utilizing the requestAnimationFrame function and trying to figure out how to call a specific function every 2 seconds. Despite my search efforts, I have been unable to find a satisfactory solution.

Here is a snippet of my code:

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

Any suggestions or ideas would be greatly appreciated!

javascript three.js requestanimationframe

Answer 1

Answer №1

requestAnimationFrame sends a single parameter to your callback function which represents the current time (in milliseconds) when requestAnimationFrame executes the callback. This can be utilized to determine the time interval between consecutive render() calls.

var last = 0; // timestamp of the last render() call
function render(now) {
    // invoke the createNewObject() function every 2 seconds
    if(!last || now - last >= 2*1000) {
        last = now;
        createNewObject();
    }
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

Answer 2

requestAnimationFrame sends a single parameter to your callback function which represents the current time (in milliseconds) when requestAnimationFrame executes the callback. This can be utilized to determine the time interval between consecutive render() calls.

var last = 0; // timestamp of the last render() call
function render(now) {
    // invoke the createNewObject() function every 2 seconds
    if(!last || now - last >= 2*1000) {
        last = now;
        createNewObject();
    }
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

Answer 3

Answer №2

This script is designed to output sequential numbers every 2 seconds.

let lastNum = 0;
let currentNum = 0;
let intervalSpeed = 2;

function countNumbers(timestamp) {
  let timeInSeconds = timestamp / 1000;

  if (timeInSeconds - lastNum >= intervalSpeed) {
    lastNum = timeInSeconds;
    console.log(++currentNum);
  }

  requestAnimationFrame(countNumbers);
}

countNumbers();

Answer 4

This script is designed to output sequential numbers every 2 seconds.

let lastNum = 0;
let currentNum = 0;
let intervalSpeed = 2;

function countNumbers(timestamp) {
  let timeInSeconds = timestamp / 1000;

  if (timeInSeconds - lastNum >= intervalSpeed) {
    lastNum = timeInSeconds;
    console.log(++currentNum);
  }

  requestAnimationFrame(countNumbers);
}

countNumbers();

Answer 5

Answer №3

Dealing with a similar issue led me to devise the following workaround:

let count = 0
const interval = 2 * 60 // assuming 60 ticks per second

function display() {
  if (++count % interval === 0)
    doSomethingElse()

  requestAnimationFrame(display)
}

UPDATE: This approach is tied to frame rate, making it less than ideal.

Answer 6

Dealing with a similar issue led me to devise the following workaround:

let count = 0
const interval = 2 * 60 // assuming 60 ticks per second

function display() {
  if (++count % interval === 0)
    doSomethingElse()

  requestAnimationFrame(display)
}

UPDATE: This approach is tied to frame rate, making it less than ideal.

Answer 7

Answer №4

Utilizing the power of requestAnimationFrame, you can ensure a smooth 60fps frame rate (assuming your browser can handle it). By waiting for 2 seconds before requesting a new frame, the browser will deliver a frame right on cue:

        function render() {
            // Call createNewObject() every 2 seconds
            createNewObject();
            renderer.render(scene, camera);
        }

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

Answer 8

Utilizing the power of requestAnimationFrame, you can ensure a smooth 60fps frame rate (assuming your browser can handle it). By waiting for 2 seconds before requesting a new frame, the browser will deliver a frame right on cue:

        function render() {
            // Call createNewObject() every 2 seconds
            createNewObject();
            renderer.render(scene, camera);
        }

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

Answer 9

Answer №5

Effortless JavaScript Timer that executes every specified interval

Variation of the MDN Example --> Here.

/*
<div id="test">
        <h1>Hello World</h1>
</div>
*/
const element = document.getElementById('test');
let start, previousTimeStamp;


timerConfig = {
    frequency: 1, // Seconds
    stopAt: 10, // Seconds,
    pos: 1,  // px
    posStep: 10,  // px
    updatePos: () => {
        timerConfig.pos = timerConfig.pos + timerConfig.posStep;
    }
}

function customTimer(timestamp) {    
    if (start === undefined)  start = timestamp;
    if (previousTimeStamp === undefined)  previousTimeStamp = timestamp;
    const seconds = timerConfig.frequency*1000;
    const tick = timestamp - previousTimeStamp; 

    function performAction() {
        element.style.transform = 'translateX(' + timerConfig.pos + 'px)';
    }

    if (tick >= seconds) {
        performAction();
        previousTimeStamp = timestamp; // Updating The Timer every second
        timerConfig.updatePos();
    }
    if (timestamp < timerConfig.stopAt*1000) requestAnimationFrame(customTimer); // 10 Seconds    
    
}

requestAnimationFrame(customTimer);

Answer 10

Effortless JavaScript Timer that executes every specified interval

Variation of the MDN Example --> Here.

/*
<div id="test">
        <h1>Hello World</h1>
</div>
*/
const element = document.getElementById('test');
let start, previousTimeStamp;


timerConfig = {
    frequency: 1, // Seconds
    stopAt: 10, // Seconds,
    pos: 1,  // px
    posStep: 10,  // px
    updatePos: () => {
        timerConfig.pos = timerConfig.pos + timerConfig.posStep;
    }
}

function customTimer(timestamp) {    
    if (start === undefined)  start = timestamp;
    if (previousTimeStamp === undefined)  previousTimeStamp = timestamp;
    const seconds = timerConfig.frequency*1000;
    const tick = timestamp - previousTimeStamp; 

    function performAction() {
        element.style.transform = 'translateX(' + timerConfig.pos + 'px)';
    }

    if (tick >= seconds) {
        performAction();
        previousTimeStamp = timestamp; // Updating The Timer every second
        timerConfig.updatePos();
    }
    if (timestamp < timerConfig.stopAt*1000) requestAnimationFrame(customTimer); // 10 Seconds    
    
}

requestAnimationFrame(customTimer);

Invoke a function at regular intervals using requestAnimationFrame

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Effortless JavaScript Timer that executes every specified interval

Similar questions

Unable to modify the state with a computed setter in VueJS

Issues arise with loader path syntax when CDNs are not used. ThreeJs npm node js library requires relative references to begin with either "/", "./", or

Vue.js: API request taking too long during mounted lifecycle

TabContainer - streamline your selection process with inline tabs

Tips for ensuring only digits can be entered in a textbox on Firefox

Infinite scrolling with Jquery: Loading dynamic content seamlessly from external websites

Transform the character encoding from a non-standard format to UTF-8

What is the correct way to incorporate a JavaScript file into a PHP document?

Update the nodes in a directed graph with fresh data

Develop a wrapper for API handlers to minimize redundancy

Steps for designing a popup modal that triggers upon calling a specific function

The issue of 'require is not defined' arises when using Webpack configuration including "target: 'node'" and "type: 'module'"

Is it possible to apply CSS animations to manipulate HTML attributes?

Error message: Action Cable could not execute the command due to a RuntimeError. It is unable to locate the subscription with the given

Replacing CSS using jQuery/JavaScript

Instructions for rotating a sphere simultaneously along the x, y, and z axes

In JavaScript, the code fails to verify the email entered through a form

Expanding Text Box

If the href attribute is set to "#" or the target attribute is set to "_blank", then the <a> request cannot be prevented

Learn the steps to emphasize the first row of a material table using React