Some confusion with requestAnimationFrame()

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) {
  document.getElementById('circle').style.left = ol + "px";
  if (time < 4000){
    circleInterval = requestAnimationFrame(circleAnimation);
  } else {
    document.getElementById('circle').style.backgroundColor = "dimgrey";

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?

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

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