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( '按时器代码' );
} );参数是一个回调函数，返回值是一个整数，用来表示按时器的编号.
Document
《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》
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方式：
Document
《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 = '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》
0%
二、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 = '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方式
Document
《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 = '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》
0%
信赖看了本案牍例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！
举荐浏览：
H5的Drag与Drop详解
运用canvas实现视频里的弹幕结果
以上就是H5的按时器requestAnimationFrame运用技巧的细致内容，更多请关注 百分百源码网 其它相干文章！
