在requestAnimationFrame出现之前，我们一般都用setTimeout和setInterval，那么html5为什么新增一个requestAnimationFrame，他的出现是为了解决什么问题？
优势与特点：
1)requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
2)在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
3)requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销
一句话就是：这玩意性能高，不会卡屏，根据不同的浏览器自动调整帧率。如果看不懂或者不理解，也没有什么关系，这玩意跟浏览器渲染原理有关。我们先学会使用它！
如何使用requestAnimationFrame？
使用方式跟定时器setTimeout差不多，不同之处在于，他不需要设置时间间隔参数
1 ????????var timer = requestAnimationFrame( function(){2 ????????????console.log( ‘定时器代码‘ );3 ????????} );参数是一个回调函数，返回值是一个整数，用来表示定时器的编号.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 ????<title>Document</title> 8 ????<script> 9 ????????window.onload = function(){10 ????????????var aInput = document.querySelectorAll( "input" ),11 ????????????????timer = null;12 ????????????aInput[0].onclick = function(){13 ????????????????timer = requestAnimationFrame( function say(){14 ????????????????????console.log( 1 );15 ????????????????????timer = requestAnimationFrame( say );16 ????????????????} );17 ????????????};18 ????????????aInput[1].onclick = function(){19 ????????????????cancelAnimationFrame( timer );20 ????????????}21 ????????}22 ????</script>23 </head>24 <body>25 ????<input type="button" value="开启">26 ????<input type="button" value="关闭">27 </body>28 </html>cancelAnimationFrame用来关闭定时器
这个方法需要处理兼容：
简单的兼容：
1 window.requestAnimFrame = (function(){2 ??return ?window.requestAnimationFrame ??????||3 ??????????window.webkitRequestAnimationFrame ||4 ??????????window.mozRequestAnimationFrame ???||5 ??????????function( callback ){6 ????????????window.setTimeout(callback, 1000 / 60);7 ??????????};8 })();如果浏览器都不认识AnimationFrame，就用setTimeout兼容.
运用3种不同的定时器（setTimeout, setInterval, requestAnimationFrame）实现一个进度条的加载
一、setInterval方式：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 ????<title>Document</title> 8 ????<style> 9 ????????div{10 ????????????width:0px;11 ????????????height:40px;12 ????????????border-radius:20px;13 ????????????background:#09f;14 ????????????text-align:center;15 ????????????font:bold 30px/40px ‘微软雅黑‘;16 ????????????color:white;17 ????????}18 ????</style>19 ????<script>20 ????????window.onload = function(){21 ????????????var oBtn = document.querySelector( "input" ),22 ????????????????oBox = document.querySelector( "div" ),23 ????????????????timer = null, curWidth = 0,24 ????????????????getStyle = function( obj, name, value ){25 ????????????????????if( obj.currentStyle ) {26 ????????????????????????return obj.currentStyle[name];27 ????????????????????}else {28 ????????????????????????return getComputedStyle( obj, false )[name];29 ????????????????????}30 ????????????????};31 ????????????oBtn.onclick = function(){32 ????????????????clearInterval( timer );33 ????????????????oBox.style.width = ‘0‘;34 ????????????????timer = setInterval( function(){35 ????????????????????curWidth = parseInt( getStyle( oBox, ‘width‘ ) );36 ????????????????????if ( curWidth < 1000 ) {37 ????????????????????????oBox.style.width = oBox.offsetWidth + 10 + ‘px‘;38 ????????????????????????oBox.innerHTML = parseInt( getStyle( oBox, ‘width‘ ) ) / 10 + ‘%‘;39 ????????????????????}else {40 ????????????????????????clearInterval( timer );41 ????????????????????}42 ????????????????}, 1000 / 60 );43 ????????????}44 ????????}45 ????</script>46 </head>47 <body>48 ????<div>0%</div>49 ????<p><input type="button" value="ready!Go"></p>50 </body>51 </html>二、setTimeout方式
1 <script> 2 ????????window.onload = function(){ 3 ????????????var oBtn = document.querySelector( "input" ), 4 ????????????????oBox = document.querySelector( "div" ), 5 ????????????????timer = null, curWidth = 0, 6 ????????????????getStyle = function( obj, name, value ){ 7 ????????????????????if( obj.currentStyle ) { 8 ????????????????????????return obj.currentStyle[name]; 9 ????????????????????}else {10 ????????????????????????return getComputedStyle( obj, false )[name];11 ????????????????????}12 ????????????????};13 ????????????oBtn.onclick = function(){14 ????????????????clearTimeout( timer );15 ????????????????oBox.style.width = ‘0‘;16 ????????????????timer = setTimeout( function go(){17 ????????????????????curWidth = parseInt( getStyle( oBox, ‘width‘ ) );18 ????????????????????if ( curWidth < 1000 ) {19 ????????????????????????oBox.style.width = oBox.offsetWidth + 10 + ‘px‘;20 ????????????????????????oBox.innerHTML = parseInt( getStyle( oBox, ‘width‘ ) ) / 10 + ‘%‘;21 ????????????????????????timer = setTimeout( go, 1000 / 60 );22 ????????????????????}else {23 ????????????????????????clearInterval( timer );24 ????????????????????}25 ????????????????}, 1000 / 60 );26 ????????????}27 ????????}28 ????</script>三、requestAnimationFrame方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 ????<title>Document</title> 8 ????<style> 9 ????????div{10 ????????????width:0px;11 ????????????height:40px;12 ????????????border-radius:20px;13 ????????????background:#09f;14 ????????????text-align:center;15 ????????????font:bold 30px/40px ‘微软雅黑‘;16 ????????????color:white;17 ????????}18 ????</style>19 ????<script>20 ????????window.onload = function(){21 ????????????var oBtn = document.querySelector( "input" ),22 ????????????????oBox = document.querySelector( "div" ),23 ????????????????timer = null, curWidth = 0,24 ????????????????getStyle = function( obj, name, value ){25 ????????????????????if( obj.currentStyle ) {26 ????????????????????????return obj.currentStyle[name];27 ????????????????????}else {28 ????????????????????????return getComputedStyle( obj, false )[name];29 ????????????????????}30 ????????????????};31 ????????????oBtn.onclick = function(){32 ????????????????cancelAnimationFrame( timer );33 ????????????????oBox.style.width = ‘0‘;34 ????????????????timer = requestAnimationFrame( function go(){35 ????????????????????curWidth = parseInt( getStyle( oBox, ‘width‘ ) );36 ????????????????????if ( curWidth < 1000 ) {37 ????????????????????????oBox.style.width = oBox.offsetWidth + 10 + ‘px‘;38 ????????????????????????oBox.innerHTML = parseInt( getStyle( oBox, ‘width‘ ) ) / 10 + ‘%‘;39 ????????????????????????timer = requestAnimationFrame( go );40 ????????????????????}else {41 ????????????????????????cancelAnimationFrame( timer );42 ????????????????????}43 ????????????????} );44 ????????????}45 ????????}46 ????</script>47 </head>48 <body>49 ????<div>0%</div>50 ????<p><input type="button" value="ready!Go"></p>51 </body>52 </html>[js高手之路] html5新增的定时器requestAnimationFrame实战进度条
原文地址：http://www.cnblogs.com/ghostwu/p/7611119.html