[js高手之路] 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>
posted @ 2017-09-29 15:21  ghostwu  阅读(4850)  评论(2编辑  收藏  举报
Copyright ©2017 ghostwu