request Animation Frame
Building towards a solid gameLoop
setInterval can, technically produce high frame-rate
animations, but it is not intended for this.
“requestAnimationFrame produces higher quality animation
completely eliminating flicker and shear that can happen when using
setTimeout or setInterval, and reduce or
completely remove frame skips.”
The window.requestAnimationFrame() method tells the
browser that you wish to perform an animation and requests that the
browser calls a specified function to update an animation right before
the next repaint. The method takes a callback as an argument to be
invoked before the repaint.
This function is one shot, meaning it needs to be called recursively.
function smoothAnimation() {
// animation
requestAnimationFrame(smoothAnimation)
}
requestAnimationFrame(smoothAnimation)