Utilizing elapsed time in coding to create a function for DOM manipulation

Question

Utilizing elapsed time in coding to create a function for DOM manipulation

As a new software engineering student, I am facing a challenge that I am struggling to overcome. I am currently working on developing a basic rhythm game similar to Guitar Hero using HTML, CSS, and JavaScript.

I have successfully implemented an elapsedTime function that starts a timer as soon as the start button is pressed. However, I am now stuck on how to create a function that utilizes this elapsed time to drop notes based on integers/floats stored in an array. Essentially, I need to compare the numbers in the array to the current elapsed time and determine when it is the appropriate moment to drop a note. Any suggestions or explanations on how to tackle this issue would be highly appreciated. Thank you in advance!

 
let elapsedTime = 0;
let counter = 0;

function increaseCounter() {
  if (counter >= 10) {
    clearInterval(intervalId); // Stop the interval when the counter reaches 10
    console.log("Interval stopped.");
    return;
  } else {
    counter++;
    console.log(`The counter is ${counter}`);
  }
}

const intervalId = setInterval(increaseCounter, 428.571);

javascript arrays

Answer 1

Answer №1

If you're looking to track time accurately in your web application, one option is to utilize requestAnimationFrame(). This method schedules a callback to be executed before the next repaint, providing the number of milliseconds since navigation started as an argument. Here's an example of how you could use it:

let start;
let previousTimeStamp;

function step(timeStamp) {
  if (start === undefined) {
    start = timeStamp;
  }
  const elapsed = timeStamp - start;
  // ... render something,
  // then schedule another frame:
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

Another option is performance.now(), which provides time elapsed in milliseconds since navigation began with an accuracy limited to ~100 microseconds. To increase accuracy to ~5 microseconds, consider serving your page with specific headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

For another alternative, document.timeline.currentTime gives you the elapsed time in milliseconds since the page was loaded. Keep in mind browser privacy settings may cause this value to differ by up to 100 milliseconds.

Answer 2

If you're looking to track time accurately in your web application, one option is to utilize requestAnimationFrame(). This method schedules a callback to be executed before the next repaint, providing the number of milliseconds since navigation started as an argument. Here's an example of how you could use it:

let start;
let previousTimeStamp;

function step(timeStamp) {
  if (start === undefined) {
    start = timeStamp;
  }
  const elapsed = timeStamp - start;
  // ... render something,
  // then schedule another frame:
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

Another option is performance.now(), which provides time elapsed in milliseconds since navigation began with an accuracy limited to ~100 microseconds. To increase accuracy to ~5 microseconds, consider serving your page with specific headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

For another alternative, document.timeline.currentTime gives you the elapsed time in milliseconds since the page was loaded. Keep in mind browser privacy settings may cause this value to differ by up to 100 milliseconds.

Utilizing elapsed time in coding to create a function for DOM manipulation

Answer №1

Similar questions

Import an array in Python from a text file formatted in ASCII style

Utilizing iOS Local Storage for Efficient Form Submission Handling

Error message: The protocol "https:" is not compatible with this function. Please use "http:" instead

How can we ensure that Ajax consistently provides useful and positive outcomes?

What advantages come from destructuring in conjunction with require statements?

Is the HTML5 type of button functioning properly, while the type of submit is not working as

How can I use appendChild to place two different elements into a single div?

Is it possible to link multiple references to a single Element/Node?

Holding off on completing a task until the outcomes of two parallel API requests are received

Activate just the show more / show less button on the website that has several buttons with identical ids

Text displayed in dropdown when selecting autocomplete option from Material UI

Can you explain the syntax for the Javascript tag?

Retrieve JSON object based on its unique identifier from a different JSON file

Prevent ng-click functionality from activating when clicking on a link inside an external element

Encountering an ERROR with the message "Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError" while attempting to apply a filter to

What is the best way to implement client side validation for a related input field using JavaScript in a Rails application?

Delete the span element if the password requirements are satisfied

Top way to include an HTML and javascript file in an Ext.Panel within Sencha Touch

Instead of receiving the actual values from the array, I am seeing the memory addresses of the array elements (Output:[I@59494225) in Scala. In the following code snippet, I anticipate the output to be (2

What is the best way to delay JavaScript execution until after React has finished rendering?