html5新增的定時器requestAnimationFrame實(shí)現(xiàn)進(jìn)度條功能
發(fā)布時間：2018-12-13 16:11:35 作者：佚名 
我要評論
我要評論html5為什么新增一個requestAnimationFrame，他的出現(xiàn)是為了解決什么問題？帶著這些問題跟隨腳本之家小編一起學(xué)習(xí)吧
在requestAnimationFrame出現(xiàn)之前，我們一般都用setTimeout和setInterval，那么html5為什么新增一個requestAnimationFrame，他的出現(xiàn)是為了解決什么問題？
優(yōu)勢與特點(diǎn)：
1)requestAnimationFrame會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率
2)在隱藏或不可見的元素中，requestAnimationFrame將不會進(jìn)行重繪或回流，這當(dāng)然就意味著更少的CPU、GPU和內(nèi)存使用量
3)requestAnimationFrame是由瀏覽器專門為動畫提供的API，在運(yùn)行時瀏覽器會自動優(yōu)化方法的調(diào)用，并且如果頁面不是激活狀態(tài)下的話，動畫會自動暫停，有效節(jié)省了CPU開銷
一句話就是：這玩意性能高，不會卡屏，根據(jù)不同的瀏覽器自動調(diào)整幀率。如果看不懂或者不理解，也沒有什么關(guān)系，這玩意跟瀏覽器渲染原理有關(guān)。我們先學(xué)會使用它！
如何使用requestAnimationFrame？
使用方式跟定時器setTimeout差不多，不同之處在于，他不需要設(shè)置時間間隔參數(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="關(guān)閉">
</body>
</html>
cancelAnimationFrame用來關(guān)閉定時器
這個方法需要處理兼容：
簡單的兼容：
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
如果瀏覽器都不認(rèn)識AnimationFrame，就用setTimeout兼容.
運(yùn)用3種不同的定時器（setTimeout, setInterval, requestAnimationFrame）實(shí)現(xiàn)一個進(jìn)度條的加載
一、setInterval方式：
<!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>
<style>
div{
width:0px;
height:40px;
border-radius:20px;
background:#09f;
text-align:center;
font:bold 30px/40px '微軟雅黑';
color:white;
}
</style>
<script>
window.onload = function(){
var oBtn = document.querySelector( "input" ),
oBox = document.querySelector( "div" ),
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>
</head>
<body>
<div>0%</div>
<p><input type="button" value="ready!Go"></p>
</body>
</html>
二、setTimeout方式
<script>
window.onload = function(){
var oBtn = document.querySelector( "input" ),
oBox = document.querySelector( "div" ),
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方式
<!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>
<style>
div{
width:0px;
height:40px;
border-radius:20px;
background:#09f;
text-align:center;
font:bold 30px/40px '微軟雅黑';
color:white;
}
</style>
<script>
window.onload = function(){
var oBtn = document.querySelector( "input" ),
oBox = document.querySelector( "div" ),
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>
</head>
<body>
<div>0%</div>
<p><input type="button" value="ready!Go"></p>
</body>
</html>
相關(guān)文章
html5給漢字加拼音加進(jìn)度條的實(shí)現(xiàn)代碼
這篇文章主要介紹了html5給漢字加拼音加進(jìn)度條的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一2020-04-07
基于HTML5 SVG實(shí)現(xiàn)的圓形滑塊進(jìn)度條特效源碼
基于HTML5 SVG實(shí)現(xiàn)的圓形滑塊進(jìn)度條特效源碼是一段通過滑塊拖動控制進(jìn)度條數(shù)值，默認(rèn)支持設(shè)置進(jìn)度條最大數(shù)值。非常有意思，歡迎有興趣的朋友前來下載使用2019-11-25
HTML5超炫酷粒子效果的進(jìn)度條的實(shí)現(xiàn)示例
這篇文章主要介紹了HTML5超炫酷粒子效果的進(jìn)度條的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2019-08-23HTML5觸摸事件實(shí)現(xiàn)移動端簡易進(jìn)度條的實(shí)現(xiàn)方法
這篇文章主要介紹了HTML5觸摸事件實(shí)現(xiàn)移動端簡易進(jìn)度條的實(shí)現(xiàn)方法的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-04HTML5實(shí)現(xiàn)自帶進(jìn)度條和滑塊滑桿效果
本文給大家介紹了HTML5實(shí)現(xiàn)自帶進(jìn)度條和滑塊滑桿效果，運(yùn)用progress標(biāo)簽，設(shè)置好min和max數(shù)值就好，可以用value獲取其中的進(jìn)度值。具體實(shí)現(xiàn)代碼大家參考下本文2018-04-17
HTML5實(shí)現(xiàn)儀表盤進(jìn)度條特效代碼
儀表盤進(jìn)度條HTML5特效是一款基于HTML5 Canvas制作的自定義三個儀表盤進(jìn)度條，非常不錯，喜歡的朋友快來下載體驗(yàn)吧2020-09-25
