Comparison between setTimeout and requestanimationframe (page refresh)

And setTimeout comparison ,requestAnimationFrame The biggest advantage is It's up to the system to decide when to execute the callback function . More specifically , If the screen refresh rate is 60Hz, So the callback function is every 16.7ms Be executed once , If the refresh rate is 75Hz, Then the interval becomes 1000/75=13.3ms, In other words ,requestAnimationFrame The pace of the system to follow the pace of innovation . It ensures that the callback function is executed only once in each refresh interval of the screen , This will not cause frame loss , It doesn't cause the animation to get stuck .

function move() {

            y++;

            cxt.clearRect(0, 0, w, h)

            cxt.fillRect(x, y, 2, 35)

            requestAnimationFrame(move) // Native js Animated by 

        }

        move()