requestAnimationFrame 是一种在浏览器中执行动画的 API，它可以让我们在浏览器中创建具有更高性能和更流畅动画效果的应用。然而，在某些情况下，我们需要停止 requestAnimationFrame 的递归/环。本文将介绍如何完成这项任务。
简单的 requestAnimationFrame 示例
首先，让我们从一个简单的 requestAnimationFrame 示例开始。
function animate() {
requestAnimationFrame(animate);
console.log('animation is running');
}
animate();上述代码将每帧都输出 "animation is running" ，并且会一直执行下去。如果你使用 Chrome 浏览器的开发者工具查看控制台，你会发现输出次数非常大，直到你手动停止脚本为止。
停止 requestAnimationFrame 递归/环的方法
有两种常见的方法可以停止 requestAnimationFrame 的递归/环。
方法一：使用 cancelAnimationFrame()
cancelAnimationFrame() 是 requestAnimationFrame() 的相对应函数，它可以用于停止 requestAnimationFrame() 的执行。要使用该函数，我们需要先存储 requestAnimationFrame 的 ID，并在需要时调用 cancelAnimationFrame 函数来停止它的执行。
-- -------------------- ---- ------- --- ------------ -------- --------- - ----------- - ------------------------------- ---------------------- -- ---------- - ---------- -- ---- ----------------------------------
上述代码将在执行 requestAnimationFrame() 后，将其 ID 存储在 animationId 变量中，并在需要停止动画时使用 cancelAnimationFrame() 函数来停止它的执行。这个方法可以提供更精确的控制。
方法二：使用条件语句
我们可以利用一个条件语句来停止 requestAnimationFrame 的递归/环。
-- -------------------- ---- -------
--- ------------------ - -----
-------- --------- -
-- -------------------- -
-------------------------------
---------------------- -- ----------
-
-
----------
-- ----
------------------ - ------上述代码将在 animate() 函数的开始添加了一个条件语句，以便根据 isAnimationRunning 变量的值来决定是否继续执行 requestAnimationFrame()。当需要停止动画时，只需将变量设置为 false 即可。
总结
本文介绍了两种常见的方法来停止 requestAnimationFrame 的递归/环。第一种方法是使用 cancelAnimationFrame() 函数，该函数可以提供更精确的控制。第二种方法是使用条件语句，在函数中添加一个判断，以便根据变量值来决定是否继续执行 requestAnimationFrame()。了解如何停止 requestAnimationFrame 的递归/环对于编写更高效和流畅的动画非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14806