html5新增的定時器requestAnimationFrame實戰進度條
阿新 • • 發佈:2019-02-08
在requestAnimationFrame出現之前,我們一般都用setTimeout和setInterval,那麼html5為什麼新增一個requestAnimationFrame,他的出現是為了解決什麼問題?
優勢與特點:
1)requestAnimationFrame會把每一幀中的所有DOM操作集中起來,在一次重繪或迴流中就完成,並且重繪或迴流的時間間隔緊緊跟隨瀏覽器的重新整理頻率
2)在隱藏或不可見的元素中,requestAnimationFrame將不會進行重繪或迴流,這當然就意味著更少的CPU、GPU和記憶體使用量
3)requestAnimationFrame是由瀏覽器專門為動畫提供的API,在執行時瀏覽器會自動優化方法的呼叫,並且如果頁面不是啟用狀態下的話,動畫會自動暫停,有效節省了CPU開銷
一句話就是:這玩意效能高,不會卡屏,根據不同的瀏覽器自動調整幀率。如果看不懂或者不理解,也沒有什麼關係,這玩意跟瀏覽器渲染原理有關。我們先學會使用它!
如何使用requestAnimationFrame?
使用方式跟定時器setTimeout差不多,不同之處在於,他不需要設定時間間隔引數
1 var timer = requestAnimationFrame( function(){
2 console.log( '定時器程式碼' );
3 } );
引數是一個回撥函式,返回值是一個整數,用來表示定時器的編號.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script>
9 window.onload = function(){
10 var aInput = document.querySelectorAll( "input" ),
11 timer = null;
12 aInput[0].onclick = function(){
13 timer = requestAnimationFrame( function say(){
14 console.log( 1 );
15 timer = requestAnimationFrame( say );
16 } );
17 };
18 aInput[1].onclick = function(){
19 cancelAnimationFrame( timer );
20 }
21 }
22 </script>
23 </head>
24 <body>
25 <input type="button" value="開啟">
26 <input type="button" value="關閉">
27 </body>
28 </html>
cancelAnimationFrame用來關閉定時器
這個方法需要處理相容:
簡單的相容:
1 window.requestAnimFrame = (function(){
2 return window.requestAnimationFrame ||
3 window.webkitRequestAnimationFrame ||
4 window.mozRequestAnimationFrame ||
5 function( callback ){
6 window.setTimeout(callback, 1000 / 60);
7 };
8 })();
如果瀏覽器都不認識AnimationFrame,就用setTimeout相容.
運用3種不同的定時器(setTimeout, setInterval, requestAnimationFrame)實現一個進度條的載入
一、setInterval方式:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 div{
10 width:0px;
11 height:40px;
12 border-radius:20px;
13 background:#09f;
14 text-align:center;
15 font:bold 30px/40px '微軟雅黑';
16 color:white;
17 }
18 </style>
19 <script>
20 window.onload = function(){
21 var oBtn = document.querySelector( "input" ),
22 oBox = document.querySelector( "div" ),
23 timer = null, curWidth = 0,
24 getStyle = function( obj, name, value ){
25 if( obj.currentStyle ) {
26 return obj.currentStyle[name];
27 }else {
28 return getComputedStyle( obj, false )[name];
29 }
30 };
31 oBtn.onclick = function(){
32 clearInterval( timer );
33 oBox.style.width = '0';
34 timer = setInterval( function(){
35 curWidth = parseInt( getStyle( oBox, 'width' ) );
36 if ( curWidth < 1000 ) {
37 oBox.style.width = oBox.offsetWidth + 10 + 'px';
38 oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
39 }else {
40 clearInterval( timer );
41 }
42 }, 1000 / 60 );
43 }
44 }
45 </script>
46 </head>
47 <body>
48 <div>0%</div>
49 <p><input type="button" value="ready!Go"></p>
50 </body>
51 </html>