H5的定時器requestAnimationFrame使用技巧

這次帶給大家H5的計時器requestAnimationFrame使用技巧，H5定時器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( '定时器代码' );
        } );

參數是一個回呼函數，傳回值是一個整數，用來表示定時器的編號.

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <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>


    <input>
    <input>

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方式：

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        p{
            width:0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px &#39;微软雅黑&#39;;
            color:white;
        }
    </style>
    <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 = &#39;0&#39;;
                timer = setInterval( function(){
                    curWidth = parseInt( getStyle( oBox, &#39;width&#39; ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + &#39;px&#39;;
                        oBox.innerHTML = parseInt( getStyle( oBox, &#39;width&#39; ) ) / 10 + &#39;%&#39;;
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>


    <p>0%</p>
    <p><input></p>

二、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 = &#39;0&#39;;
                timer = setTimeout( function go(){
                    curWidth = parseInt( getStyle( oBox, &#39;width&#39; ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + &#39;px&#39;;
                        oBox.innerHTML = parseInt( getStyle( oBox, &#39;width&#39; ) ) / 10 + &#39;%&#39;;
                        timer = setTimeout( go, 1000 / 60 );
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>

    三、requestAnimationFrame方式

 nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        p{
            width:0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px &#39;微软雅黑&#39;;
            color:white;
        }
    </style>
    <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 = &#39;0&#39;;
                timer = requestAnimationFrame( function go(){
                    curWidth = parseInt( getStyle( oBox, &#39;width&#39; ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + &#39;px&#39;;
                        oBox.innerHTML = parseInt( getStyle( oBox, &#39;width&#39; ) ) / 10 + &#39;%&#39;;
                        timer = requestAnimationFrame( go );
                    }else {
                        cancelAnimationFrame( timer );
                    }
                } );
            }
        }
    </script>


    <p>0%</p>
    <p><input></p>

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

H5的Drag與Drop詳解

#使用canvas實作影片裡的彈幕效果

以上是H5的定時器requestAnimationFrame使用技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！