首頁  >  文章  >  web前端  >  h5的定時器怎樣實現進度條功能

h5的定時器怎樣實現進度條功能

php中世界最好的语言
php中世界最好的语言原創
2018-01-19 09:13:342349瀏覽

這次帶給大家h5的計時器怎麼實作進度條功能,h5的計時器實作進度條功能的注意事項有哪些,下面就是實戰案例,一起來看一下。

在requestAnimationFrame出現之前,我們通常都會用setTimeout和setInterval,那麼html5為什麼要新增一個requestAnimationFrame,他的出現是為了解決什麼問題?

優勢與特點:

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

2)在隱藏或不可見的元素中,requestAnimationFrame將不會進行重繪或回流,這當然就意味著更少的CPU 、GPU和記憶體使用量

3)requestAnimationFrame是由瀏覽器專門為動畫提供的API,在運行時瀏覽器會自動優化方法的調用,如果頁面不是激活狀態下的話,動畫會自動暫停,有效節省了CPU開銷

一句話就是:這玩意性能高,不會卡屏,根據不同的瀏覽器自動調整幀率。如果看不懂或不理解,也沒有什麼關係,這玩意跟瀏覽器渲染原理有關。我們先學會使用它!

如何使用requestAnimationFrame?

使用方式跟定時器setTimeout差不多,不同之處在於,他不需要設定時間間隔參數

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

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

<!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)實作進度條的載入

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

HTML的table滑鼠拖曳排序該如何實現

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

怎麼解決各種ie6-ie10的相容問題

以上是h5的定時器怎樣實現進度條功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn