Before the emergence of RequestanimationFrame, we generally use settimeout and setInterval, so why does HTML5 add a new RequestanimationFrame? What is his appearance to solve?
Advantages and characteristics:1) RequestanimationFrame will concentrate all the DOM operations in each frame, complete it in one rewriting or return, and the time interval of re -painting or return is closely following the browser's refresh frequency.
2) In the hidden or invisible element, the RequestanimationFrame will not re -draw or return, which means that there are fewer CPUs, GPUs and memory usage.
3) Requestanimationframe is an API provided by the browser specifically for animation. When runtime, the browser will automatically optimize the method call, and if the page is not activated, the animation will automatically suspend, effectively saving the CPU expenses
In a word, this stuff is high and will not be stuck, and the frame rate is automatically adjusted according to different browsers. If you do n’t understand or understand, it does n’t matter. This thing is related to the principle of rendering of the browser. Let's learn to use it first!
How to use RequestanimationFrame?
The way of use is similar to the timer settimeout. The difference is that he does not need to set time interval parameters
var timer = RequestanimationFrame (function () {console.log ('timer code');});});The parameter is a callback function, and the return value is an integer, which is used to represent the number of the timer.
<! Doctype html> <html Lang = EN> <Head> <meta Charset = UTF-8> <meta name = Viewport Content = Width = DEVICE-WIDTH, Initial-SCALE = 1.0> <META HTT p-equiv = x-uaa -Compatible Content = IE = EDGE> <Title> Document </Title> <Script> Window.Onload = Function () {Var Ainput = Document.queerySelectOlLLL (input), Timer = Null ; Ainput [0] .onClight = Function ( ) {Timer = RequestanimationFrame (Function say () {console.log (1); Timer = RequestanimationFrame (say);};}; Ainput [1] .onClick = Function () {Can ClanimationFrame (Timer);}} </ script> </head> <body> <input type = Button value = open> <input type = button value = closed> </body> </html>CancelanimationFrame is used to turn off the timer
This method needs to be compatible:
Simple compatibility:
Window.requestanimframe = (Function () {Return Window.requestanimationFrame || Window.webkitrequestanimationFrame || Window.mozrequestanimation || Func tion (callback) {window.settimeout (callback, 1000 /60);};});If the browser does not know AnimationFrame, use settimeout compatibility.
Use 3 different timers (Settimeout, SetInterval, RequestanimationFrame) to achieve a loading of a progress bar
1. SetInterval method: <! Doctype html> <html Lang = EN> <Head> <meta Charset = UTF-8> <meta name = Viewport Content = Width = DEVICE-WIDTH, Initial-SCALE = 1.0> <META HTT p-equiv = x-uaa -Compatible Content = IE = Edge> <Title> Document </Title> <STYLE> DIV {Width: 0px; Height: 40px; Border-Radius: 20px; Background:#09F; Text-Align : Center; FONT: Bold 30px /40px 'Microsoft Yahei'; Color: White;} </style> <script> Window.Onload = Function () {var obtn = document.queryselector (input), OBOX = DOCUMENT.QUERYSELEC tor (div), timer = null , Curwidth = 0, GetStyle = Function (Obj, name, value) {if (obj.currentStyle) {Return obj.currenttenle [name];} Else {RetComputedStyle (OBJ, OBJ, false) [name];}}; OBTN. onClick = Function () {Clearinterval (Timer); OBOX. Style.width = '0'; Timer = SetInterval (Function () {Curwidth = PARSEINT (OBOX, 'Width,' WIDTH ')); if (Curwidth <1000) { OBOX. Style.width = OBOX.OffsetWidth + 10 + 'PX'; ;}}, 1000 /60);}} </Script> </Head> <body> <div> 0%</div> <p> <input Type = Button Value = Ready! Go> </p> </body> </ html> Second, settimeout method <script> Window.Onload = Function () {var Obtn = DOCUMENT.QUERYSELECTOR (input), OBOX = DOCUMENT.QUERYSELECTOR (DIV), Timer = NULL, GETSTY Le = Function (obj, name, value) {if (obj.currenStyle) {Return obj.currentStyle [name];} Else {Return getComputedStyle (obj, false) [name];}; obtn.onClick = Function () {Cleart iMeout (Timer); OBOX. Style.width = '0'; Timer = Settimeout (Function GO () {Curwidth = PARSEINT (getstyle (OBOX, 'Width')); if (Curwidth <1000) {OBOX. Style.width = OBOX.OFFSET Width + 10 + 'px'; OBOX.INERHTML = PARSEINT (GetStyle (OBOX, 'Width')) / 10 + '%'; Timer = Settimeout (GO, 1000 /60);} Else {Clearinterval (Timer);}, 1000 /60); } } </script> 3. RequestanimationFrame method <! Doctype html> <html Lang = EN> <Head> <meta Charset = UTF-8> <meta name = Viewport Content = Width = DEVICE-WIDTH, Initial-SCALE = 1.0> <META HTT p-equiv = x-uaa -Compatible Content = IE = Edge> <Title> Document </Title> <STYLE> DIV {Width: 0px; Height: 40px; Border-Radius: 20px; Background:#09F; Text-Align : Center; FONT: Bold 30px /40px 'Microsoft Yahei'; Color: White;} </style> <script> Window.Onload = Function () {var obtn = document.queryselector (input), OBOX = DOCUMENT.QUERYSELEC tor (div), timer = null , Curwidth = 0, GetStyle = Function (Obj, name, value) {if (obj.currentStyle) {Return obj.currenttenle [name];} Else {RetComputedStyle (OBJ, OBJ, false) [name];}}; OBTN. Onclick = Function () {CancelanimationFrame (Timer); OBOX. Style.width = '0'; Timer = RequestanimationFrame YLE (OBOX, 'Width')); if (Curwidth <1000) {OBOX. Style.Width = OBOX.OFFSETWIDTH + 10 + 'PX'; e (Go);} Else {CancelanimationFrame (Timer);}});}} </script> </head> <body> <div> 0%</div> <p> <input type = Button value = ready! Go> </p> </ Body> </html>