Сделайте цикл анимации 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. Я думаю, что оборачивать весь скрипт в функцию, будет лучшим вариантом. Включение вызова этой функции внутри себя и передача ей аргумента в скобках свойства timeout или delay. Но setInterval () & setTimeOut () оба используют небезопасную eval () функцию внизу. Что должно быть проблемой безопасности.

Также видео на YouTube, которое я смотрел некоторое время назад, говорит, что setInterval () & setTimeOut () не достигают 60fps. Я не уверен, насколько правдоподобны эти заявления или откуда его источники, но я продолжу поиск в Сети.

Светящаяся часть выглядит хорошо, но я просто не смог заставить ее повториться. Я новичок в Js, пожалуйста, будьте терпеливы.

есть ли другие обходные пути для setTimeOut () & setInterval () .?

Answer 1

Использовать setInterval () . SetInterval принимает два параметра: первый - это функция, которую вы хотите запустить, а второй - время повторения в миллисекундах. Таким образом, чтобы запускать функцию каждые 4 секунды, вы должны сделать:

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

Answer 2

Вы можете сделать это с помощью 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/

Answer 3

Поместите этот код в функцию, которая передается в 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);
}