明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

h5的定時器怎么完成進度條技巧

發(fā)表時間：2024-05-08 來源：明輝站整理相關軟件相關文章人氣：

[摘要]這次給大家?guī)韍5的定時器怎樣實現(xiàn)進度條功能，h5的定時器實現(xiàn)進度條功能的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。在requestAnimationFrame出現(xiàn)之前，我們一般都用setTimeout和setInterval，那么html5為什么新增一個requestAnimationFr...
這次給大家?guī)韍5的定時器怎樣實現(xiàn)進度條功能，h5的定時器實現(xiàn)進度條功能的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

在requestAnimationFrame出現(xiàn)之前，我們一般都用setTimeout和setInterval，那么html5為什么新增一個requestAnimationFrame，他的出現(xiàn)是為了解決什么問題？

優(yōu)勢與特點：

1)requestAnimationFrame會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率

2)在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或回流，這當然就意味著更少的CPU、GPU和內(nèi)存使用量

3)requestAnimationFrame是由瀏覽器專門為動畫提供的API，在運行時瀏覽器會自動優(yōu)化方法的調(diào)用，并且如果頁面不是激活狀態(tài)下的話，動畫會自動暫停，有效節(jié)省了CPU開銷

一句話就是：這玩意性能高，不會卡屏，根據(jù)不同的瀏覽器自動調(diào)整幀率。如果看不懂或者不理解，也沒有什么關系，這玩意跟瀏覽器渲染原理有關。我們先學會使用它！

如何使用requestAnimationFrame？

使用方式跟定時器setTimeout差不多，不同之處在于，他不需要設置時間間隔參數(shù)

var timer = requestAnimationFrame( function(){
       console.log( '定時器代碼' );
   } );

參數(shù)是一個回調(diào)函數(shù)，返回值是一個整數(shù)，用來表示定時器的編號.

<!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>
    <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>
</head>
<body>
    <input type="button" value="開啟">
    <input type="button" value="關閉">
</body>
</html>

cancelAnimationFrame用來關閉定時器

這個方法需要處理兼容：

簡單的兼容：

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

如果瀏覽器都不認識AnimationFrame，就用setTimeout兼容.

運用3種不同的定時器（setTimeout, setInterval, requestAnimationFrame）實現(xiàn)一個進度條的加載

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！

相關閱讀：

HTML的table鼠標拖拽排序該如何實現(xiàn)

HTML 5之新增的特性該如何使用

怎樣解決各種ie6-ie10的兼容問題

以上就是h5的定時器怎樣實現(xiàn)進度條功能的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。