requestAnimationFrame in Javascript

#javascript

[JS #1 WIL Post]

I was doing my tic-tac-toe project when I stumbled upon requestAnimationFrame in javascript. At the initial stages of my development, I was using window alerts to broadcast the winner of the game. But then I stumbled on one problem: the winner is broadcasted before the winning move is rendered in the board. After thorough searching, the answers I can find in the web is all about using setTimeOut to delay the alerts. I decided to ask for some help in stack overflow and learned a lot from the answer.

I started digging about request animation frame in javascript. Basically window.requestAnimationFrame() is used if you want to manually tell the browser to update the UI before the next repaint. This method takes a callback function which is invoked before the repaint. More information can be found in its comprehensive MDN docs.

This is my first time hearing about this window.requestAnimationFrame function ever since I started learning js, around two years ago. Thank you to that SO user for the very insightful answer :).

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.