Shulou(Shulou.com)05/31 Report--

This article mainly introduces the html5 how to make the new timer related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this html5 how to make the new timer article will have a harvest, let's take a look at it.

Before the advent of requestAnimationFrame, we usually used setTimeout and setInterval, so why did html5 add a requestAnimationFrame, and what problem did he solve?

Advantages and characteristics:

1) requestAnimationFrame centralizes all DOM operations in each frame and completes them in a single redraw or reflow, and the interval between redrawing or reflux closely follows the refresh rate of the browser.

2) in hidden or invisible elements, requestAnimationFrame will not redraw or reflow, which of course means less CPU, GPU, and memory usage

3) requestAnimationFrame is an API specially provided by the browser for animation. At run time, the browser will automatically optimize the method call, and if the page is not active, the animation will be automatically paused, effectively saving CPU overhead.

In a word: this thing has high performance, does not jam the screen, and automatically adjusts the frame rate according to different browsers. It doesn't matter if you don't understand or don't understand, it has something to do with the principle of browser rendering. Let's learn to use it first!

How to use requestAnimationFrame?

It is used in much the same way as the timer setTimeout, except that it does not need to set the interval parameter

Var timer = requestAnimationFrame (function () {console.log ('timer code');})

The parameter is a callback function, and the return value is an integer that represents the timer number.

Document _ window.onload = function () {var aInput = document.querySelectorAll ("input"), timer = null; aInput [0] .onclick = function () {timer = requestAnimationFrame (function say () {console.log (1); timer = requestAnimationFrame (say);}) }; aInput [1] .onclick = function () {cancelAnimationFrame (timer);}}

CancelAnimationFrame is used to turn off the timer

This method needs to deal with compatibility:

Simple compatibility:

Window.requestAnimFrame = (function () {return window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | function (callback) {window.setTimeout (callback, 1000 / 60);};}) ()

If browsers don't even know AnimationFrame, use setTimeout compatibility.

Use three different timers (setTimeout, setInterval, requestAnimationFrame) to load a progress bar

1. SetInterval mode:

Document p {width:0px; height:40px; border-radius:20px; background:#09f; text-align:center; font:bold 30px/40px 'Microsoft Yahei'; color:white } _ window.onload = function () {var oBtn = document.querySelector ("input"), oBox = document.querySelector ("p"), timer = null, curWidth = 0, getStyle = function (obj, name) Value) {if (obj.currentStyle) {return obj.currentStyle [name] } else {return getComputedStyle (obj, false) [name];}}; oBtn.onclick = function () {clearInterval (timer); oBox.style.width ='0' Timer = setInterval (function () {curWidth = parseInt (getStyle (oBox, 'width')); if (curWidth < 1000) {oBox.style.width = oBox.offsetWidth + 10 +' px'; oBox [XSS _ clean] = parseInt (getStyle (oBox, 'width')) / 10 +'%' } else {clearInterval (timer);}, 1000 / 60);}}

0%

II. SetTimeout mode

_ window.onload = function () {var oBtn = document.querySelector ("input"), oBox = document.querySelector ("p"), timer = null, curWidth = 0, getStyle = function (obj, name, value) {if (obj.currentStyle) {return obj.currentStyle [name] } else {return getComputedStyle (obj, false) [name];}}; oBtn.onclick = function () {clearTimeout (timer); oBox.style.width ='0' Timer = setTimeout (function go () {curWidth = parseInt (getStyle (oBox, 'width')); if (curWidth < 1000) {oBox.style.width = oBox.offsetWidth + 10 +' px'; oBox [XSS _ clean] = parseInt (getStyle (oBox, 'width')) / 10 +'%' Timer = setTimeout (go, 1000 / 60);} else {clearInterval (timer);}, 1000 / 60);}}

III. RequestAnimationFrame mode

Document p {width:0px; height:40px; border-radius:20px; background:#09f; text-align:center; font:bold 30px/40px 'Microsoft Yahei'; color:white } _ window.onload = function () {var oBtn = document.querySelector ("input"), oBox = document.querySelector ("p"), timer = null, curWidth = 0, getStyle = function (obj, name) Value) {if (obj.currentStyle) {return obj.currentStyle [name] } else {return getComputedStyle (obj, false) [name];}}; oBtn.onclick = function () {cancelAnimationFrame (timer); oBox.style.width ='0' Timer = requestAnimationFrame (function go () {curWidth = parseInt (getStyle (oBox, 'width')); if (curWidth < 1000) {oBox.style.width = oBox.offsetWidth + 10 +' px'; oBox [XSS _ clean] = parseInt (getStyle (oBox, 'width')) / 10 +'%' Timer = requestAnimationFrame (go);} else {cancelAnimationFrame (timer);}});}}

0%

This is the end of the article on "how to make a new timer in html5". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to make the new timer in html5". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.