The setInterval approach, while functional, is not ideal for creating smooth animations due to several limitations.
Fixed Interval: The setInterval function calls the animation function at a fixed interval. However, this interval does not account for the actual time taken to render each frame, potentially causing inconsistencies in frame timing.
Frame Dropping: If the browser is under heavy load, setInterval might not adhere to the specified interval. It can lead to skipped or uneven frames, resulting in a choppy animation.
Inefficient Resource Usage: The setInterval method continues running even when the user navigates away from the page or the canvas is not visible, consuming unnecessary resources.
No Synchronization with Refresh Rate: Modern monitors typically refresh at a rate of 60 frames per second. The setInterval function does not synchronize with this refresh rate, leading to visual artifacts like tearing or stuttering.
Switching to requestAnimationFrame overcomes these issues as browsers optimize animations created with it by aligning them with the display's refresh rate and pausing the animation when the page is not visible, conserving resources.