html5制作新增的按时器requestAnimationFrame实战进度条-

在requestAnimationFrame涌现以前，我们个别都用setTimeout和setInterval，那么html5为何新增一个requestAnimationFrame，他的涌现是为理解决什么题目？ 在requestAnimationFrame涌现以前，我们个别都用setTimeout和setInterval，那么html5为何新增一个requestAnimationFrame，他的涌现是为理解决什么题目？

优势与特色：

1)requestAnimationFrame会把每一帧中的所有DOM操纵集中起来，在一次重绘或回流中就完成，而且重绘或回流的工夫隔断紧紧追随阅读器的刷新频率

2)在隐蔽或不成见的元素中，requestAnimationFrame将不会进行重绘或回流，这固然就意味着更少的CPU、GPU和内存运用量

3)requestAnimationFrame是由阅读器专门为动画供给的API，在运转时阅读器会主动优化办法的调取，而且要是页面不是激活状态下的话，动画会主动暂停，有效节俭了CPU开销

一句话就是：这玩意机能高，不会卡屏，依据不一样的阅读器主动调整帧率。要是看不懂或者不睬解，也没有什么关系，这玩意跟阅读器渲染道理有关。我们先学会运用它！

怎样运用requestAnimationFrame？

运用方式跟按时器setTimeout差未几，不一样之处在于，他不需要设定工夫隔断参数

var timer = requestAnimationFrame( function(){
             console.log( '按时器代码' );
                      } );

参数是一个回调函数，返回值是一个整数，用来表示按时器的编号.

    
    
    
    
    《script》
        window.onload = function(){
            var aInput = document.querySelectorAll( "input" ),
                timer = null;
            aInput[0].onclick = function(){
                timer = requestAnimationFrame( function say(){
                    console.log( 1 );
                    timer = requestAnimationFrame( say );
                } );
            };
            aInput[1].onclick = function(){
                cancelAnimationFrame( timer );
            }
        }
    《script》


    
    

cancelAnimationFrame用来关闭按时器

这个办法需要处置兼容：

简略的兼容：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

要是阅读器都不相识AnimationFrame，就用setTimeout兼容.

使用3种不一样的按时器（setTimeout, setInterval, requestAnimationFrame）实现一个进度条的加载

一、setInterval方式：

    
    
    
    
    
    《script》
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "p" ),
                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》


    
0%
    

二、setTimeout方式

《script》
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "p" ),
                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(){
                clearTimeout( timer );
                oBox.style.width = '0';
                timer = setTimeout( function go(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                        timer = setTimeout( go, 1000 / 60 );
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    《script》

三、requestAnimationFrame方式

    
    
    
    
    
    《script》
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "p" ),
                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(){
                cancelAnimationFrame( timer );
                oBox.style.width = '0';
                timer = requestAnimationFrame( function go(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                        timer = requestAnimationFrame( go );
                    }else {
                        cancelAnimationFrame( timer );
                    }
                } );
            }
        }
    《script》


    
0%
    

以上就是html5制作新增的按时器requestAnimationFrame实战进度条 的细致内容，更多请关注 百分百源码网 其它相干文章！