Question

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

“.radial”是我的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);
});

::更新::

阅读以下评论并在Youtube上搜索。我认为将整个脚本包装在一个函数中是最好的选择。在其自身和附件中包括对该功能的调用。在超时或延迟属性的括号中传递一个参数。但 setInterval（）＆amp; setTimeOut（）都使用下面的不安全的 eval（）函数。这应该是一个安全问题。

我前段时间观看过的YouTube视频，说 setInterval（）＆amp; setTimeOut（）不能达到60fps。我不确定这些说法是多么合法，或者他的来源来自哪里，但我会继续搜索网站。

发光部分看起来不错，但我一直无法让它重复。我是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有两个参数，第一个是你想要运行的函数，第二个是你的重复时间，以毫秒为单位。所以要每隔4秒运行一次函数：

this

Answer 3

你可以使用setInterval来完成，就像在其他答案中一样，但我认为如果你有一个animate函数不断调用自己，逻辑会更清晰。

你正在添加一个＆＃34;发光＆＃34;类，但你永远不会删除它。 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/

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

3 个答案: