Javascript setInterval vs setTimeout vs requestAnimationFrame

我最近编写了一个项目，通过以下方式触发动画，该项目中每7秒都会出现一些复杂的SVG SMIL多动画：

function startMyCustomAnim() { myElement.beginElement(); }

window.setInterval( startMyCustomAnim, 7000 ); 

执行此操作时，在我的SVG中经过一段时间后会发生奇怪的事情，例如它的元素消失等（SVG SMIL动画持续时间设置为0.5s，其中一些在0.5s结束时触发，持续时间为0.01s，以进行不可更改的调整）

我现在已经阅读了许多文章，了解了问题中提到的三种功能的比较，并想确认我对事物的理解是正确的：

• 基本上，永远不要使用

  setInterval

  ，尤其是在动画持续时间接近间隔持续时间的情况下，以避免在任何函数执行过程中出现问题/延迟时出现所谓的延迟和其他问题

• 对于较大的间隔，可以递归地使用

  setTimeout（）

  ，也可以使用内部布尔变量跟踪执行状态

• 对于需要以高频率执行的回调；为确保相关动画顺利运行（例如，

  滚动

  侦听器），请在

  requestAnimationFrame（）

  中调用回调

是这样吗？因此，就我的例子而言，通过使用以下方法，我在性能和平滑动画方面会更好：

function startMyCustomAnim() {
  
  myElement.beginElement(); 

  window.setTimeout( startMyCustomAnim, 7000 );

}

---

这是我的案例的理想方法吗？关于动画，如果这有关系的话，它们是两组2个附加的

animateTransform

标记（一个用于

rotate

，一个用于

translate

），每对应用于一个特定元素。

你说得对。setTimeout和setInterval对我来说是一样的，只是使用了不同的用法。如果您想要一个具有间隔的无限循环，那么setInterval更好。但如果你只是想在5秒后超时，就用timeout。所以在你的情况下，我更喜欢间隔时间。