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

:: 更新 ::

已阅读下面的 cmets 并在 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);
}

Answer 2

使用setInterval()。 setInterval 有两个参数，第一个是您要运行的函数，第二个是您的重复时间（以毫秒为单位）。因此，要每 4 秒运行一次函数，您可以：

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

Answer 3

您可以使用setInterval 来做到这一点，就像在其他答案中一样，但我认为如果您有一个不断调用自身的animate 函数，逻辑会更清晰。

您正在添加一个“发光”类，但您永远不会删除它。 animate 函数应该打开和关闭它。为了清楚起见，让我们将其设为一个单独的函数，toggleGlow。

接下来，我们在每个动画循环中启动单独的 toggleGlow 函数，每个径向都有不同的延迟。

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

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/