javascript - 让javascript动画函数循环，直到页面加载

Question

我复制和编辑了一段 javascript，它是为动画加载环设计的，但动画只运行一次，我希望它每 4 秒运行一次，直到页面加载完毕，但我可以找不到正确的语法/脚本来让它重复，我不希望它重新加载页面，只循环该特定脚本，直到我将其设置为停止。

“.radial”是我的 css 和 html 文件中包含的径向线的类。它们有十二个，它们不旋转，只有荧光.glow 动画部分使其在旋转时出现。代码是；

const radials = [...document.querySelectorAll('.radial')];
let degrees = 29;

for(i=0; i < radials.length; i++) {
  degrees += 13;
  radials[i].style.transform = `rotate(${degrees}deg)`;
  degrees += 34;
}

radials.forEach((radial, index) => {
  setTimeout(function() {                                           
    radial.classList.add('glow');                                               
  },index * 29);
});

::更新::

阅读了下面的评论并在 YouTube 上进行了搜索。我认为将整个脚本包装在一个函数中将是最好的选择。在其自身中包含对该函数的调用，并在超时或延迟属性的括号中向其传递参数。但是 setInterval() 和 setTimeOut() 都使用了不安全的 eval() 函数。这应该是一个安全问题。

还有我不久前看过的一个 YouTube 视频，说 setInterval() 和 setTimeOut() 没有达到 60fps。 requestAnimationFrame() 将是一个更好的选择。我不确定这些说法有多合法，或者他的消息来源来自哪里，但我将继续搜索网络。

发光部分看起来不错，但我只是无法让它重复。我是Js新手，请耐心等待。

对于setTimeOut()和setInterval()还有其他解决方法吗？

Answer 1

将此代码放入传递给 setInterval() 的函数中定时器调用。

function loop() { 
  const radials = [...document.querySelectorAll('.radial')];
  let degrees = 29;

  for(i=0; i < radials.length; i++) {
    degrees += 13;
    radials[i].style.transform = `rotate(${degrees}deg)`;
    degrees += 34;
  }

  radials.forEach((radial, index) => {
    setTimeout(function() {                                           
      radial.classList.add('glow');                                               
    },index * 29);
  });

  setTimeout(loop, 4000);
}