Is this the proper way to use requestAnimationFrame?

Question

I have a piece of software that I wrote which fires repaints of the screen as soon as the updating logic is finished. The issue is that the updating logic happens over 1000 times per second. The browser cannot update the screen this quickly, so I figured that a requestAnimationFrame would allow me to update the screen for the user in a slower manner.

I structured the code like so:

function repaint(){
   now = Date.now();
   elapsed = now-then;
   if(elapsed > 2000){
   .
   .
   .
   //animation goes here
   .
   .
   .
   then = Date.now();
   }

}

function startRepaint(){
   then = Date.now();
   requestAnimationFrame(repaint);
}

while(count < 1000){
   .
   .
   .
   startRepaint();
   .
   .
   .
}

Can I use requestAnimationFrame in this way to achieve my desired functionality?

no ... you'll start 1000 requestAnimationFrames all at once, anyway, what is `count`?? - usually, you would have a conditional `requestAnimationFrame` inside the repaint function — Jaromanda X, Aug 26 '20 at 00:11
@JaromandaX If you have requestAnimationFrame in the repaint function, should the callback function be that same repaint function? — drakzuli, Aug 26 '20 at 00:14
yes, you'd use `requestAnimationFrame(repaint);` *conditionally* - i.e .only if more animation is required - still, your while loop makes no sense — Jaromanda X, Aug 26 '20 at 00:18
@JaromandaX what makes no sense, the count variable? The details are not important but essentially im just limiting the process to 1000 iterations. — drakzuli, Aug 26 '20 at 01:12
ahh, so, you wouldn't do that in a while loop for the reason I gave — Jaromanda X, Aug 26 '20 at 01:16

score 1 · Accepted Answer · answered Aug 26 '20 at 01:26

What you have here is not what you’re looking for.

Every time you go through the while loop, you call startRepaint() which sends off a request for an animation frame.

After the first call to that function you go through the while loop and call it again. By the time you have called this function a second time, you may not have received your first animation frame yet.

Ideally, you want to set it up so that you call an update function which in turn sends the next request.

function repaint() {
    ...
    requestAnimationFrame(repaint);
}

Doing it this way ensures that you always complete a full frame of your code before trying to start the next one.

You could use a counter variable in the repaint function to track the iterations.

Is this the proper way to use requestAnimationFrame?

1 Answers1