js 的 requestAnimationFrame
时间: 2023-10-31 17:54:21 浏览: 33
requestAnimationFrame是一种用于优化动画效果的JavaScript方法,它可以在浏览器重绘之前调用一个指定的回调函数,以便更新动画的状态。它的用法类似于setInterval,但requestAnimationFrame使用浏览器的刷新频率来计时,可以更加高效地使用系统资源。
要停止requestAnimationFrame的执行,可以使用cancelAnimationFrame方法。cancelAnimationFrame接收一个参数,这个参数是requestAnimationFrame方法返回的id。在需要停止动画的地方调用cancelAnimationFrame方法,并将对应的id作为参数传入,就可以停止requestAnimationFrame的执行。
例如,当动画达到某个条件时,可以使用cancelAnimationFrame来停止动画的执行。在代码中,可以使用如下的方式停止requestAnimationFrame的执行:
```javascript
// 声明一个变量来存储requestAnimationFrame的返回值
let rafId;
function step() {
// 动画逻辑
// 当需要停止动画时,调用cancelAnimationFrame并传入对应的id
if (condition) {
cancelAnimationFrame(rafId);
} else {
// 继续执行动画
rafId = requestAnimationFrame(step);
}
}
// 开始执行动画
rafId = requestAnimationFrame(step);
```
通过以上的代码,当达到指定的条件时,使用cancelAnimationFrame来停止requestAnimationFrame的执行。