背景：

使用 setInterval 或 setTimeout 时，我们会收到一个 Id 来取消/清除操作。

设置间隔/设置超时：

requestAnimationFrame： 使用 raf 时，对于 step 的每一次迭代，我们都会重置 rafId，并且我们只在最新的 rafId 上调用 cancelAnimationFrame？

问题： cancelAnimationFrame 如何知道在rafId不断更新时关闭所有先前对 requestAnimationFrame 的调用？

我猜测 cancelAnimationFrame 使用 frameId 并关闭它后面的所有内容。

如果那是真的，它如何与多个一起工作requestAnimationFrames（因为它们将共享一个 frameIds）

我有一个情绪检测，使用 openCV.js 进行面部检测，使用 tensorflow.js 进行情绪分类。当我开始情绪检测时，我调用 requestAnimFrame(myProcessingLogic) 函数并将我的检测逻辑传递给回调参数。我的处理逻辑再次调用 requestAnimFrame(myProcessingLogic)。

当禁用情绪检测时，会设置一个全局变量，然后禁用对 requestAnimFrame 的递归调用。这工作正常。

...但是在情绪检测的每次重新激活时，都会再次调用 requestAnimFrame 调用。这会导致性能问题。

我尝试在检测停止时全局保存 requestAnimFrame() 的返回 id 以调用 cancelAnimFrame() ，但这似乎没有效果。

第一次调用：

处理逻辑

我查看了 firefox 运行时分析，发现每次重新激活时都会执行一个额外的函数调用。

我无法识别 step() 函数中的一行来指示动画已完成。因此，我无法正确取消AnimationFrame。

问题：这是 cancelAnimationFrame() 不起作用的原因吗？如果是，我应该在哪一行代码中指示动画已经完成，以便我可以取消AnimationFrame？

见https://codepen.io/jek/pen/RwwXBpz

因此，我正在尝试创建一个使对象以弯曲运动移动的功能。这个函数应该被重用并且应该能够将不同的数字作为参数。这些数字将用作指导曲线方向的控制点。我面临两个问题：

1. 当尝试使用参数point0x而point0y不是方程中的变量时，输出的xt值与我使用变量时的差异很大。同时，输出yt为NaN. 但是，每当我插入p0.x并p0.y替换它们时，一切都会按预期进行。

2. 我想用它cancelRequestAnimationFrame();来停止动画递归。我不断收到错误消息：

   cancelRequestAnimationFrame 未定义。

   我需要在完全不同的功能中取消吗？我应该避免在if声明中使用它吗？

我目前正在编写一个网站，单击导航链接后，HTML 画布会在相关内容框上画一条线（我在这里使用了 markE 的精彩答案https://stackoverflow.com/a/23941786作为动画教程）。我正在为这些线条制作动画，我遇到了以下问题：

单击另一个链接时，如何阻止第一个动画完成？

我已经尝试在几次迭代中创建一个标志和 cancelAnimationFrame，但并不高兴。

这是一些简化的代码，目前使用一个标志：

HTML

JavaScript

重申一下，以防我不清楚：当我点击“关于”然后立即点击“联系”时，我希望在我第一次点击“关于”时初始化的绘制动画完全停止（包括清除画布）和“接触”动画开始。目前，“接触”动画确实开始了，但“关于”动画也坚持结束。当我单击“大约”两次时，也会发生同样的事情 - 动画同时运行两次......

我正在画画布罪恶并为其添加运动

每次我按下按钮再次绘制它时，画布都会重新绘制它，但它的移动速度比以前快 2 倍。我试着做

希望它会得到cancelAnimationFrame()requestID 来停止正在进行的动画，但它没有用。

我想在超时后取消动画。这是我的代码

在这里，我想停止 animate 函数的递归并启动更新函数。但动画不会停止，更新功能在给定时间后同时运行。

我希望点跟随鼠标光标，例如点击。代码看起来很简单，但每次单击时，点都会运行更短的距离并且不会到达目标。

问题是为什么？

代码在这里：

https://jsfiddle.net/thiefunny/ny0chx3q/3/

HTML

JavaScript

编辑：对于这个任务，我需要 requestAnimationFrame()，而不是 CSS，因为这只是最简单的例子，但我想稍后为运动添加更多复杂性，包括多个点、随机参数等，就像我在这里所做的那样：https ://walanus.pl

我花了很多时间进行实验，但我唯一的结论是，在单击事件之后，我应该以某种方式取消当前动画并开始新的动画，以便为下一个动画重新开始。

为什么cancelAnimationFrame ()不会在MouseDown 事件上停止动画？但是第二次点击会触发动画停止。可能是什么问题呢？有没有办法在过早停止动画之后从“动画函数”返回当前的“ cur ”和“ rez ”值？

完整版的代码。 https://codesandbox.io/s/peaceful-silence-bm6hx?file=/src/scroll.js

代码

不工作： -

工作不知道为什么:-

如果您通过示例进行解释，那就太好了。

谢谢你的时间。