cancelAnimationFrame无效

如果 `cancelAnimationFrame` 无效，通常是因为你传递给它的参数不正确。确保你传递给 `cancelAnimationFrame` 的参数是由 `requestAnimationFrame` 返回的有效 `requestID`。如果你尝试取消已经执行的动画帧，那么 `cancelAnimationFrame` 也会无效。此外，如果你的代码在多个地方使用 `requestAnimationFrame` 和 `cancelAnimationFrame`，请确保它们都在同一个作用域内，以避免出现混淆或错误。

相关问题

cancelAnimationFrame

cancelAnimationFrame是用于取消由requestAnimationFrame方法创建的定时器的方法。当我们使用requestAnimationFrame创建了一个定时器后，可以使用cancelAnimationFrame来取消该定时器，以停止动画的执行。相比于使用setTimout()或者setInterval()方法来实现动画，使用requestAnimationFrame和cancelAnimationFrame可以更好地控制动画的流畅性，并避免出现丢帧的现象。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* *2* [js中的requestAnimationFrame与cancelAnimationFrame](https://blog.csdn.net/m0_52773472/article/details/113590117)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

window.cancelAnimationFrame

window.cancelAnimationFrame()是一个用于取消先前通过window.requestAnimationFrame()方法请求的动画帧回调函数的方法。它接受一个参数，即先前通过requestAnimationFrame()方法返回的请求ID。通过调用cancelAnimationFrame()方法，可以停止指定的动画帧回调函数的执行。

使用cancelAnimationFrame()方法可以有效地停止动画的执行，避免不必要的资源消耗。在使用requestAnimationFrame()方法创建动画时，通常会将返回的请求ID存储起来，以便在需要时使用cancelAnimationFrame()方法取消动画。

以下是cancelAnimationFrame()方法的示例用法：

// 创建动画
function animate() {
  // 动画逻辑
  requestID = requestAnimationFrame(animate);
}

// 取消动画
function stopAnimation() {
  cancelAnimationFrame(requestID);
}

在上述示例中，animate()函数通过requestAnimationFrame()方法创建了一个动画，并将返回的请求ID存储在requestID变量中。当需要停止动画时，可以调用stopAnimation()函数来取消动画的执行，从而调用cancelAnimationFrame()方法并传递requestID作为参数。