问题
- requestAnimationFrame执行速度很快,几乎每秒执行60次
- 无法控制requestAnimationFrame执行速度,但可以控制执行逻辑
思路
- 初始化一个时间戳
- 执行动画创建一个时间戳
- 动画时间戳 - 初始时间戳 = 本次动画距离上一次初始时间戳的时间间隔
- 大于规定毫秒执行代码逻辑
- 小于不做任何操作
码
let myStatu = 10000,
anFinish = 0;
let updatedRaf = undefined,
fps = 30,
timer = new Date().getTime();
const onAnimationFrame = () => {
anFinish++
if (anFinish > myStatu) return cancelAnimationFrame(updatedRaf)
if (new Date().getTime() - timer > fps) {
console.log('My Name Is ShuaiGeiGe', anFinish);
timer = new Date().getTime()
}
updatedRaf = requestAnimationFrame(onAnimationFrame);
};
updatedRaf = requestAnimationFrame(onAnimationFrame);