JS之BOM篇-requestAnimationFrame

HTML5新增了一个定时器requestAnimationFrame，旨在让动画操作更顺畅，更简单，更高效。requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

使用

requestAnimationFrame的使用方法和setTimeout类似，只是不需要设置时间间隔。requestAnimationFrame使用一个回调函数作为参数，该函数会在浏览器重绘之前调用。它会返回一个整数表示定时器编号，可以传递给cancelAnimationFrame用于取消这个函数的执行

var timer = requestAnimationFrame(function(){
  console.log(timer)
})
console.log(0)
// 0
// 1

cancelAnimationFrame取消定时器

var timer = requestAnimationFrame(function(){
  console.log(timer)
})
cancelAnimationFrame(timer)

var timer = requestAnimationFrame(function(){
  console.log(timer)
})
cancelAnimationFrame(1)

兼容

IE9-浏览器不支持requestAnimationFrame方法，可以使用setTimeout代替

if (!window.requestAnimationFrame) {
   window.requestAnimationFrame = function(fn) {
    setTimeout(fn, 17);
  };
   window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
  };
}

应用

一个简单的进度条效果

<div id="box" style="width: 0;height: 20px;line-height: 20px;background: teal">0%</div>
<button id="btn">开始</button>
 <script>
   var timer;
   btn.onclick = function() {
     box.style.width = 0;
     cancelAnimationFrame(timer);
     timer = requestAnimationFrame(function fn() {
      if(parseInt(box.style.width) < 500) {
        box.style.width = parseInt(box.style.width) + 5 + 'px';
        box.innerHTML = parseInt(box.style.width) / 5 + '%';
        timer = requestAnimationFrame(fn)
      }else{
        cancelAnimationFrame(timer);
      }
     })
   }
 </script>