reduce/thottle requestAnimationFrame für Canvas-Animation

Question

Im Erstellen eines HTML5 Canvas-Animationen und möchte die Bildrate reduzieren/drosseln. Ich verwende derzeit die requestAnimationFrame-Methode. Um die Bildrate zu drosseln, verwende ich setTimeout.

Gibt es eine bessere/effizientere Möglichkeit, dies zu tun?

// Game - animation loop 
     var fps = 5; 
     function step() { 
     setTimeout(function() { 
      update(); 
      draw(); 
      window.requestAnimationFrame(step); 
     }, 1000/fps); 
     } 

Dank

Answer 1

const fps = 5; 
const delay = Math.ceil(1000/fps); 
let last = Date.now(); 
let now; 

function step() { 
    now = Date.now(); 
    if(now - last < delay) { 
     return requestAnimationFrame(step); 
    } 
    last = now; 
    update(); 
    draw(); 
    requestAnimationFrame(step); 
} 

step();