requestAnimationFrame的作用及使用

我们平时实现JavaScript动画效果时离不开setInterval或者setTimeout函数，这两个函数本质上相同的。

以setInterval为例，他的作用是以相同的时间间隔执行某个操作，这个时间可以自定义，利用这个特性我们就可以让然也元素跑起来。

可是这个函数有个毛病，他和显示器的刷新频率无法对应。比如说显示器每100毫秒刷新一次，setInterval函数设置的间隔执行也是100毫秒，可是我们没有办法保证显示频率刷新的时候setInterval的操作正好被执行，虽然它们的相对执行时间相同，可绝对时间不一定一致，所以setInterval制作动画的时候会出现丢帧和动画效果生硬不连贯等情况。

requestAnimFrame是H5新标准上的东西，在PC浏览器上会出现兼容问题，在移动端浏览器中可以任意使用。次函数会接受一个回调函数，当浏览器的显示频率刷新的时候，此函数会被执行。

window.requestAnimationFrame(function( time){
    //显示频刷新的时候被执行
})；

回调函数有一个参数，是一个相对的时间毫秒值，表示当前的刷新时间。

requestAnimationFrame的回调函数并不能被重复调用，这点和setInterval不同，它和setTimeout类似，回调函数只能被调用一次，只不过setTimeout可以自定义调用时间， requestAnimationFrame的调用时间则是跟着系统的刷新频率走的，所以在实现动画的时候，setTimeout比requestAnimationFrame更加灵活， requestAnimationFrame比setTimeout表现效果更加优秀。

以在3000毫秒内移动1500px距离的动画为例

setTimeout的实现方式

<div id="div" style="width:100px; height:100px; background-color:#000; position: absolute;left:0; top:0;">
    
</div>

<script type="text/javascript">
let divEle = document.getElementById("div");

const distance = 1500;
const timeCount = 3000;

const intervalTime = 10;
let runCount = timeCount / intervalTime;
let moveValue = distance / runCount;

function handler() {
    let left = parseInt(divEle.style.left);
    if(left >= distance) {
        return;
    }
    divEle.style.left = left + moveValue;
    window.setTimeout(handler, intervalTime);
}

window.setTimeout(handler, intervalTime);
</script>

以上代码通过setTimeout每10毫秒为间隔时间改变一次元素的位置以实现元素的动画效果，当然，可以通过改变这个间隔时间来微调动画效果，可是你永远没有办法确定最优方案，因为它总会和刷新频率存在交叉。

通过requestAnimationFrame我们可以给出更好的解决方案

<div id="div" style="width:100px; height:100px; background-color:#000; position: absolute;left:0; top:0;">
    
</div>

<script type="text/javascript">

let divEle = document.getElementById("div");

const distance = 1500;
const timeCount = 3000;

function handler( time ) {
    if(time > timeCount) {
        time = timeCount;
    }
    divEle.style.left = time * distance / timeCount;  
    window.requestAnimationFrame( handler );
}

 window.requestAnimationFrame( handler );
</script>

如果setTimeout，handler函数也会被递归的重复调用，只是它的调用和显示的刷新频率是一致的，因此动画效果更加顺滑自然，也能找到性能和效果的最佳均衡点，得到最有的解决方案。

requestAnimationFrame的作用及使用

推荐阅读更多精彩内容