[js高手之路] html5新增的定时器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( '定时器代码' );
} );
参数是一个回调函数，返回值是一个整数，用来表示定时器的编号.
<!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>
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
如果浏览器都不认识AnimationFrame，就用setTimeout兼容.
运用3种不同的定时器（setTimeout, setInterval, 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(){
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>
<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>
run code
二、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>
[js高手之路] html5新增的定时器requestAnimationFrame实战进度条的更多相关文章
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- [js高手之路]html5 canvas动画教程 - 下雪效果
利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
随机推荐
- MySQL之数据的备份与还原
备份db_book:这里用到了cmd,以管理员方式运行,不然后面使用mysqldump会被拒绝访问!!! 1.启动cmd,输入命令,切换到MySQL的bin文件: 2.然后输入备份命令: 备份好的sq ...
- 欠了好久的CRM帖子，双11来读。
又一年双11了,觉得天猫双11越来越没特色了. 从折扣,音符旋律到红包,今年15年却找不出往年的热度,只是商家还是一样的急,备着活动目标计划,做着库存价格打标视觉设计这种苦逼的日子. 欠了好久的CRM ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- JavaScript在应用中的技巧（二）
==,===运算符和强制转换 先看个表达式: "1.0e0" == { valueOf: function() { return true; } }; 是的,这个结果可能有点出乎意 ...
- JAVA实用案例之图片水印开发
写在最前面 上周零零碎碎花了一周的时间研究水印的开发,现在终于写了个入门级的Demo,做下笔记同时分享出来供大家参考. Demo是在我上次写的 JAVA实用案例之文件导入导出(POI方式) 框架基础上 ...
- 求N个元素的子集合个数
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt406 一个集合有n个元素,请问怎么算出来它的子集(包括空集和本身)是 2的n ...
- EIGRP系统复习【转载】
EIGRP理论 简介 EIGRP是Cisco私有协议,它是由距离矢量和链路状态两种路由协议混合而成的一种协议.即像距离矢量协议那样,EIGRP从它的相邻路由器那里得到更新信息:也像链路状态协议那样,保 ...
- centos6 内核优化
以下为部分优化参数,具体优化方法还要看情况而定 [root@localhost ~]# vi /etc/sysctl.conf #末尾添加如下参数 net.ipv4.tcp_syncookie ...
- JAVA基础第八组（5道题）
36. 37. 38.[程序38] 题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. package com.niit.homework1; import java.u ...
- 结对作业--基于GUI的四则运算生成器
组员:201421123015 陈麟凤 201421123019 张志杰 201421123020 黄海鸿 coding 地址 :https://coding.net/u/zhang1995/p/wo ...