setInterval vs setTimeout vs requestAnimationFrame

如何解决setInterval vs setTimeout vs requestAnimationFrame

我最近编写了一个项目，其中包含每 7 秒发生一次的有点复杂的 SVG SMIL 多动画，方法是通过以下方式触发动画：

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

window.setInterval( startMyCustomAnim,7000 ); 

这样做时，我的 SVG 一段时间后发生了奇怪的事情，例如它的元素消失等（SVG SMIL 动画持续时间设置为 0.5 秒，其中一些在这 0.5 秒结束时触发持续时间为 0.01 秒以实现难以察觉的适应）。

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

• 基本上不要使用setInterval，特别是如果动画持续时间接近间隔持续时间，以避免在任何函数执行中出现问题/滞后的情况下所谓的fallovers和其他问题.

• 对于较大的间隔，递归使用 setTimeout()，可能使用一个内部布尔变量来跟踪执行状态。

• 对于需要高频率执行的回调；为确保相关动画顺利运行（例如 scroll 侦听器），请在 requestAnimationFrame() 内调用回调。

是吗？因此，对于我的示例，通过使用以下内容，我会在性能和平滑动画方面做得更好：

function startMyCustomAnim() {
  
  myElement.beginElement(); 

  window.setTimeout( startMyCustomAnim,7000 );

}

这是适合我的情况的理想方法吗？关于动画，如果这可能很重要，它们是 2 组 2 个附加 animateTransform 标签（一组用于 rotate，一组用于 translate），每对应用于一个特定元素。