谈谈requestAnimationFrame

requestAnimationFrame介绍

在做动画的时候，很多程序员会选择使用requestAnimationFrame，和setTimeout、setInterval不同，它不需要设置执行的时间频率，因为它是根据浏览器的渲染频率执行的。

一般浏览器的渲染频率为60HZ，即每秒重绘60次，执行时间间隔为1000ms/60，约等于16.66667ms。

requestAnimationFrame接受的参数是一个callback函数。

requestAnimationFrame应用

let num = 0;
function animation() {
    num += 1;
    console.log(num);
    // 每次浏览器绘制页面的时候调用一次，时间间隔约16.6667ms
    requestAnimationFrame(animation);
}
// js加载完成后执行一次
requestAnimationFrame(animation);

requestAnimationFrame取消

let num = 0;
let req = null;
function animation() {
    num += 1;
    console.log(num);
    if (num < 5) {
        req = requestAnimationFrame(animation);
    }
    else {
        cancelAnimationFrame(req);
    }
}
req = requestAnimationFrame(animation);