requestAnimationFrame

let duration = 1000;    // 持续时间
let start = 0;
function frame(time) {
    if (!start) {
        start = time;
    }

    const phase = (time - start) / duration;
    if (phase <= 1) {
        // 动画内容，直到持续时间结束
        // ......

        window.requestAnimationFrame(frame);
    }                         
}
window.requestAnimationFrame(frame);

结束动画

window.cancelAnimationFrame(handler);    // handler为window.requestAnimationFrame的返回值

• 用处：window.requestAnimationFrame()告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前更新动画。注意：当window.requestAnimationFrame()运行在后台标签页或者隐藏的iframe里面，window.requestAnimationFrame()会被暂停调用以提高性能。此动画间隔时间由浏览器决定，一般是17毫秒左右。
• 与定时器比较：setTimeout
  • 相同点：作用基本一致，但是setTimeout可以自由设置时间间隔。并且都是只执行一次，如果要实现类似setInterval的效果，需要使用递归方式。
  • 不同点：setTimeout执行受到js事件队列任务、微任务等影响，可能设定的是17毫秒执行一次，但是实际上并没有严格的卡在17毫秒，因此可能会出现绘制不及时的情况，出现抖动情况；requestAnimationFrame能严格卡在显示器刷新的时间，因此不会出现抖动的情况。