本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来h5的定时器怎样实现进度条功能,h5的定时器实现进度条功能的注意事项有哪些,下面就是实战案例,一起来看一下。在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解决什么问题?
优势与特点:
1)requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
2)在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量
3)requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销
一句话就是:这玩意性能高,不会卡屏,根据不同的浏览器自动调整帧率。如果看不懂或者不理解,也没有什么关系,这玩意跟浏览器渲染原理有关。我们先学会使用它!
如何使用requestAnimationFrame?
使用方式跟定时器setTimeout差不多,不同之处在于,他不需要设置时间间隔参数
1 2 3 | var timer = requestAnimationFrame( function (){
console.log( '定时器代码' );
} );
|
参数是一个回调函数,返回值是一个整数,用来表示定时器的编号.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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用来关闭定时器
阅读剩余部分
相关阅读 >>
在HTML5中如何提高网站前端性能的示例代码分析
HTML5的触摸事件
HTML5-web worker apis的代码详解
h5 canvas实现粒子时钟的详细方法
HTML5的头部head的详解
怎样用h5 canvas实现3d动态chart图表
app三年内是否将被HTML5顶替彻底消失?
HTML5缓存机制是什么?怎么更新缓存
详解HTML5头部<meta>标签的常用信息小结
HTML5实践-三步实现响应式设计的详细介绍
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » h5的定时器怎样实现进度条功能