這次帶給大家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中文網其它相關文章！
相關閱讀：
以上是h5的定時器怎樣實現進度條功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
