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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px '微软雅黑';
            color:white;
        }
    </style>
    <script>
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "div" ),
                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.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>
</head>
<body>
    <div>0%</div>
    <p><input type="button" value="ready!Go"></p>
</body>
</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             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>