From the course: Vanilla JavaScript: Mobile Game Programming

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Introduction to requestAnimationFrame()

Introduction to requestAnimationFrame() - JavaScript Tutorial

From the course: Vanilla JavaScript: Mobile Game Programming

Start my 1-month free trial

Introduction to requestAnimationFrame()

- [Instructor] Before we move on to write the four functions we just called from the start method we need to address the shortcomings of setTimeout and its cousin setInterval. Although both are convenient, they can pose some significant problems especially on low end or mobile platforms. Both functions are resource hogs, eating up processor cycles even when the tab running the animation is invisible. Even worse, this will deplete your mobile users' batteries alarmingly fast. Both functions require a delay in milliseconds set by the developer before executing. The delay establishes the frame rate, or the number of frames per second. Since the frame rate for all devices can't be known compromises must be made to make the animation good enough instead of the best it can be. The result is often choppy animations because the browser can't accommodate the frame rate set by the developer. When set timeout fires sometimes the browser isn't ready to redraw the screen, so the frame is skipped…

Contents