Some confusion with requestAnimationFrame()

1

I have some JS that moves a styled DIV circle from a course, and it works and looks like this:

let ol = 0;
let circleInterval;
function circleAnimation(time) {
  ol++;
  document.getElementById('circle').style.left = ol + "px";
  if (time < 4000){
    circleInterval = requestAnimationFrame(circleAnimation);
  } else {
    document.getElementById('circle').style.backgroundColor = "dimgrey";
    cancelAnimationFrame(circleInterval);
  }
}

circleInterval = requestAnimationFrame(circleAnimation);

The part that confuses me is circleAnimation(time). It has the parameter of time, but what is actually the argument that gets passed into it?

2

Looks like the simple answer is milliseconds since the method was called and when it was actually executed. Though I posted the official answer and a link to the documentation below for your review in case I’m off a little.

Here ya go:

The callback method is passed a single argument, a DOMHighResTimeStamp , which indicates the current time (based on the number of milliseconds since time origin). When callbacks queued by requestAnimationFrame() begin to fire multiple callbacks in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback’s workload. This timestamp is a decimal number, in milliseconds, but with a minimal precision of 1ms (1000 µs).

So it looks like your code will run for 4 seconds and then cancel.

1 Like
3

That’s what I was beginning to think as well. It just looks a bit weird when no argument was visibly being passed. Thanks!