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 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>