前言

与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。这有什么好处呢？为什么requestAnimationFrame被称为神器呢？本文将详细介绍HTML5新增的定时器requestAnimationFrame

一、介绍

1.引入

计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化

大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms

而setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行

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

2.特点

（1）requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

（2）在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

（3）requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

二、使用

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

window.requestAnimFrame = (function(){return  window.requestAnimationFrame       || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame    || window.oRequestAnimationFrame      || window.msRequestAnimationFrame     || function( callback ){window.setTimeout(callback, 1000 / 60);};
})();

//使用时
var timer = requestAnimationFrame(function(){console.log(0);
});
//取消时 
cancelAnimationFrame(timer)

三、应用

使用requestAnimationFrame方法制作一个简单的进度条效果

<divid="box"style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;"
>0%
</div>
<button id="btn">开始</button>

btn.onclick = function () {box.style.width = "0";btn.innerHTML = "开始"timer = requestAnimationFrame(function fn() {if (parseInt(myDiv.style.width) < 500) {box.style.width = parseInt(box.style.width) + 5 + "px";box.innerHTML = parseInt(box.style.width) / 5 + "%";timer = requestAnimationFrame(fn);} else {btn.innerHTML = "结束"cancelAnimationFrame(timer);}});
};

换种思路和方法

let start;
function step(timestamp) {if (start === undefined) start = timestamp;const remain = timestamp - start;//这里使用`Math.min()`确保元素刚好停在500px的位置,预估在0.5px/ms。box.style.width = Math.min(0.1 * remain, 500) + "px";const res = ((parseInt(box.style.width) / 500) * 100).toFixed() + "%";box.innerHTML = res;if (remain < 5000) {// 在5s后停止动画window.requestAnimationFrame(step);}
}
btn.onclick = function () {window.requestAnimationFrame(step);
};

• 加v号zyl751023293，第一时间在浏览文章中出现不明白之处，进行交流，共同进步！！！
• 如果这篇文章对你有用，记得留个脚印再走哟~