Using Frame Rate with requestAnimationFrame

Today I will show you one simple tutorial about requestAnimationFrame.
According to Mozilla development team, this requestAnimationFrame has made to :
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 before the next repaint. The method takes as an argument a callback to be invoked before the repaint.
This allows you to control the frame rate by limiting the frame rate.
First you need to make a simple HTML5 file with h1 tag and id named frame_count ( you can use any id name -if you want).

<!DOCTYPE html>
<h1 id=”frame_count”></h1>
The next step is to customize with CSS into style tab.
I make it with an Arial green font and bold style.
Just add the next source code into the style HTML tag.

Now you need to use javascript with requestAnimationFrame.
Let see the source code:

So two functions: first will use the requestAnimationFrame into the windows and draw function will drawing all into the browser.
The first function has another function to setTimeout.This creates a function object and executes it immediately because I used }());
Most of the variable is named to understand how happened.
I also used this document.querySelector.bind to return the first element within the document (using depth-first pre-order traversal of the document’s nodes) and that matches the specified group of selectors.
And the output is this:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.