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

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

“.radial”是包含在我的css和html文件中的radial类。 共有12个，它们不仅旋转荧光灯。发光动画部分使荧光灯在旋转时出现。代码是

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

const radials=[…document.queryselectoral（'.radial'）]；
设度数=29；
对于（i=0；i{
setTimeout（函数（）{
radial.classList.add（'glow'）；
}，指数*29）；
});

：：更新：：

阅读了下面的评论并在Youtube上搜索。我认为将整个脚本包装在一个函数中是最好的选择。在其自身中包含对该函数的调用&在timeout或delay属性的括号中传递参数。但是setInterval（）和setTimeOut（）都使用下面的不安全eval（）函数。这应该是一个安全问题

我刚才看的一个youtube视频也说setInterval（）和setTimeOut（）不能达到60fps。requestAnimationFrame（）是一个更好的选择。我不知道这些说法有多合法，也不知道他的消息来源在哪里，但我会继续在网上搜索

发光部分看起来不错，但我就是没能让它重复。 我是Js新手，请耐心点

---

setTimeOut（）和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);
}

函数循环（）{
常量半径=[…document.queryselectoral（'.radial'）]；
设度数=29；
对于（i=0；i{
setTimeout（函数（）{
radial.classList.add（'glow'）；
}，指数*29）；
});
设置超时（循环，4000）；
}

使用。setInterval有两个参数，第一个是要运行的函数，第二个是以毫秒为单位的重复时间。因此，要每4秒运行一次函数，您需要执行以下操作：

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

---

与其他答案一样，您可以使用

setInterval

，但我认为，如果您有一个不断调用自身的

animate

函数，那么逻辑会更清晰

您正在添加一个“glow”类，但从未删除它。

animate

功能应将其打开和关闭。为了清楚起见，让我们将其作为一个单独的函数，

toggleGlow

接下来，每个动画循环都会启动单独的

toggleGlow

功能，每个径向线都有不同的延迟

最后，animate函数将在每次短暂、恒定的延迟后重新调用自身，直到满足某些停止条件（如页面加载）

---

jsIDLE示例：

我曾尝试在youtube上搜索，也尝试过设置间隔，但似乎做得不多，后来我还尝试过设置一个函数，调用const radials部分进行备份，但没有luckI尝试过，但它仍然只运行了一次，是一个参数，我可以在你刚才提到的函数中设置间隔，就像在css中，你说2s 3s 4s etc似乎不起作用，我知道}，index*29部分是我一直在更改的，以设置周年纪念的持续时间，但我尝试了上面的两个答案。。。到目前为止运气不好，谢谢你的回复。斯科特·马库斯的回答到底出了什么问题？我将尝试对其进行优化，以满足您的需要。我尝试了Scott Marcus的答案，但它似乎没有重放，它只设置了一次动画，然后将所有半径保持在发光状态。使用setInterval（函数（）答案是没有设置重复的参数，或者这是4000ms测线的标准否，在一个时钟的形成中有大约22个半径，但不逐个设置动画（如果是一个时钟，下午2点、5点、7点、9点和11点都在同一时间开始发光，然后其他剩余的半径以顺时针方向填充发光）实际的辐射线不会旋转，尽管我可能会在后面添加它，它只是在旋转时出现的辉光方面…我会尝试你的建议…我的意思是，是的。我正试图为它设置动画。我认为你提到的旋转部分是在不同程度上绘制多个辐射线的部分d时钟，它们在某个时刻静止不动，我明白了。那么，为什么你的示例代码中有这一部分？这让人困惑。所以你试图设置光晕的动画，但你只打开了它？这应该是如何设置动画的？你有没有取消光晕类？我不完全理解你的问题，旋转部分就是什么以设定的度数计算半径。glow函数以圆周运动设置glow类的动画，但它们最终都会发光，我希望在每个循环结束时将其重置为无发光Hi Scott，感谢您的回答。setInterval（）函数仅控制动画开始前的时间延迟。不以4000ms循环intervaals@RyanStone哦，对不起，我误解了。在这种情况下，您实际上根本不会使用循环，而是使用递归函数调用。让我更新答案。@RyanStone哪个循环应该有4秒的延迟，I的

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