使JavaScript动画函数循环，直到页面加载

Question

我有一块我已复制的JavaScript＆amp;编辑是为动画加载戒指而设计的，但是动画只能运行一次，我希望它每4秒运行一次，直到页面加载，但我找不到正确的语法/脚本来重复它，我不希望它重新加载页面仅循环该特定脚本，直到我将其设置为停止。

"。径向"是我的CSS＆amp;HTML文件。其中有十二个＆amp;他们不仅旋转荧光。滴动画部分使其在旋转时会显现出现。代码是；

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);
});

:: UPDATE ::

阅读了下面的评论并在YouTube上搜索。我认为将整个脚本包裹在功能中，这将是最好的选择。在其自我＆amp中包括对该功能的调用；将其传递给超时或延迟属性的括号中的参数。但是 setInterval((＆amp; settimeout((均使用下面的Unsafe eval((函数。这应该是安全问题。

也是我前一段时间观看的YouTube视频，说 setInterval((＆amp; settimeout((无法达到60fps。requestAnimationFrame((将是一个更好的选择。我不确定这些主张是多么合法，或者他的来源来自哪里，但我将继续搜索网络。

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

settimeout((＆amp;还有其他解决方法 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);
}

Answer 2

使用setInterval((。SetInterval采用两个参数，第一个是您要运行的函数，第二个是您在Miliseconds中的重复时间。因此，要每4秒运行一次功能：

setInterval(function() { 
 // do something
}, 4000);

Answer 3

您可以使用setInterval进行操作，就像其他答案一样，但是我认为，如果您有一个不断调用的animate函数，则逻辑更清晰。

您正在添加"光芒"类，但是您永远不会删除它。animate功能应打开和关闭。为了使其清晰，让我们做一个单独的功能，toggleGlow。

接下来，每个动画循环我们启动单个toggleGlow功能，每个径向都有不同的延迟。

最后，动画函数每次短暂，恒定，延迟后都会重新呼叫自身，直到满足某些停止条件(例如页面加载(。

const radials = [...document.querySelectorAll('.radial')];
function toggleGlow(element) {
  if (element.classList.contains("glow")) {
    element.classList.remove("glow");
  } else {
    element.classList.add("glow");
  }
}
function animate() {
  radials.forEach((radial, index) => {
    setTimeout(function() {
      toggleGlow(radial);
    }, index * 29);
  });
  if (!stopCondition) {
    setTimeout(animate, 200);
  }
}
// kick it off
animate();

jsfiddle示例在这里：https：//jsfiddle.net/duxhy3lj/