碼上歡樂
相關內容    簡體    繁體

[js高手之路] html5新增的定時器requestAnimationFrame實戰進度條

本文轉載自   查看原文   2017-09-29 15:21   4018    html5/ 定時器/ requestAnimationFrame

在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 lang="en">
 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 lang="en">
 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>

 

 


二、setTimeout方式

 1 <script>
 2         window.onload = function(){
 3             var oBtn = document.querySelector( "input" ),
 4                 oBox = document.querySelector( "div" ),
 5                 timer = null, curWidth = 0,
 6                 getStyle = function( obj, name, value ){
 7                     if( obj.currentStyle ) {
 8                         return obj.currentStyle[name];
 9                     }else {
10                         return getComputedStyle( obj, false )[name];
11                     }
12                 };
13             oBtn.onclick = function(){
14                 clearTimeout( timer );
15                 oBox.style.width = '0';
16                 timer = setTimeout( function go(){
17                     curWidth = parseInt( getStyle( oBox, 'width' ) );
18                     if ( curWidth < 1000 ) {
19                         oBox.style.width = oBox.offsetWidth + 10 + 'px';
20                         oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
21                         timer = setTimeout( go, 1000 / 60 );
22                     }else {
23                         clearInterval( timer );
24                     }
25                 }, 1000 / 60 );
26             }
27         }
28     </script>

三、requestAnimationFrame方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 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                 cancelAnimationFrame( timer );
33                 oBox.style.width = '0';
34                 timer = requestAnimationFrame( function go(){
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                         timer = requestAnimationFrame( go );
40                     }else {
41                         cancelAnimationFrame( timer );
42                     }
43                 } );
44             }
45         }
46     </script>
47 </head>
48 <body>
49     <div>0%</div>
50     <p><input type="button" value="ready!Go"></p>
51 </body>
52 </html>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用定時器實現進度條效果 jquery --- 定時器和實時進度條 HTML5 進度條 YprogressBar,html5進度條樣式,js進度條插件 html5 canvas畫進度條 HTML5有特色的進度條 Qt帶進度條的啟動界面（繼承QSplashScreen，然后使用定時器） 使用原生JS+CSS或HTML5實現簡單的進度條和滑動條效果 html5 vedio 播放器，禁掉進度條快進快退事件 [js高手之路] html5 canvas動畫教程 - 勻速運動
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM