Анимированный текст не работает как функция Javascript

Я закодировал функцию для анимации текстов, манипулируя идентификатором, и установил задержку анимации, чтобы изменить идентификатор и снова запустить анимацию. Анимация началась хорошо, однако через несколько минут задержка анимации не работает или занимает больше времени, чем было установлено.

setInterval(controlAninmation_A, 100);

function controlAninmation_A() {
  var getId = document.getElementById('AA');
  getId.setAttribute("id", "A");
  var removeId = document.getElementById('A'),
    setClass = removeId;
  setTimeout(changeClass, 20000);

  function changeClass() {
    var checkClass = setClass.getAttribute("class");

    if (checkClass != "change") {
      setClass.setAttribute("class", "change");
    }
  }

  clearTimeout(changeClass);
  setTimeout(changeId, 30000);

  function changeId() {
    removeId.setAttribute("id", "AA");
    console.info("The function was executed 100% ");
  }

  clearTimeout(changeId);
}

clearInterval(controlAninmation_A);
setInterval(controlAninmation_B, 4000);

function controlAninmation_B() {

  var getId = document.getElementById('BB');
  if (getId != "B") {
    getId.setAttribute("id", "B");
  }

  var removeId = document.getElementById('B'),
    setClass = removeId;
  setTimeout(changeClass, 34000);

  function changeClass() {
    var checkClass = setClass.getAttribute("class");

    if (checkClass != "change") {
      setClass.setAttribute("class", "change");
      console.info("changed class");
    }
  }

  clearTimeout(changeClass);
  setTimeout(changeId, 27000);

  function changeId() {
    removeId.setAttribute("id", "BB");
  }

  clearTimeout(changeId);
}

clearInterval(controlAninmation_B);
setInterval(controlAninmation_C, 11000);

function controlAninmation_C() {

  var getId = document.getElementById('CC');
  if (getId != "C") {
    getId.setAttribute("id", "C");
  }

  var removeId = document.getElementById('C'),
    setClass = removeId;
  setTimeout(changeClass, 20000);

  function changeClass() {
    var checkClass = setClass.getAttribute("class");

    if (checkClass != "change") {
      setClass.setAttribute("class", "change");
      console.info("changed class");
    }
  }

  clearTimeout(changeClass);
  setTimeout(changeId, 41000);

  function changeId() {
    removeId.setAttribute("id", "CC");
  }

  clearTimeout(changeId);

}

clearInterval(controlAninmation_C);
setInterval(controlAninmation_D, 17000);

function controlAninmation_D() {
  var getId = document.getElementById('DD');
  if (getId != "D") {
    getId.setAttribute("id", "D");
  }

  var removeId = document.getElementById('D'),
      setClass = removeId;
  setTimeout(changeClass, 20000);

  function changeClass() {
    var checkClass = setClass.getAttribute("class");
    if (checkClass != "change") {
      setClass.setAttribute("class", "change");
      console.info("changed class");
    }
  }

  clearTimeout(changeClass);
  setTimeout(changeId, 47000);

  function changeId() {
    removeId.setAttribute("id", "DD");
  }

  clearTimeout(changeId);

}

clearInterval(controlAninmation_D);
setInterval(controlAninmation_E, 20000);

function controlAninmation_E() {

  var getId = document.getElementById('EE');
  if (getId != "E") {
    getId.setAttribute("id", "E");
  }

  var removeId = document.getElementById('E'),
      setClass = removeId; setTimeout(changeClass, 20000);

  function changeClass() {
    var checkClass = setClass.getAttribute("class");

    if (checkClass != "change") {
      setClass.setAttribute("class", "change");
      console.info("changed class");
    }
  }

  clearTimeout(changeClass);
  setTimeout(changeId, 50000);

  function changeId() {
    removeId.setAttribute("id", "EE");
  } clearTimeout(changeId);
}

clearInterval(controlAninmation_E);
setInterval(controlAninmation_F, 24000);

function controlAninmation_F() {
  var getId = document.getElementById('FF');
  if (getId != "") {
    getId.setAttribute("id", "F");
  }

  var removeId = document.getElementById('F'),
      setClass = removeId; setTimeout(changeClass, 20000);

  function changeClass() {
    var checkClass = setClass.getAttribute("class");

    if (checkClass != "change") {
      setClass.setAttribute("class", "change");
      console.info("changed class");
    }
  }

  clearTimeout(changeClass);
  setTimeout(changeId, 54000);

  function changeId() {
    removeId.setAttribute("id", "FF");
  }
  clearTimeout(changeId);
}

clearInterval(controlAninmation_F);
setInterval(controlAninmation_G, 27000);

function controlAninmation_G() {
  var getId = document.getElementById('GG');
  if (getId != "") {
    getId.setAttribute("id", "G");
  }
  var removeId = document.getElementById('G'),
    setClass = removeId;
  setTimeout(changeClass, 20000);

  function changeClass() {
    var checkClass = setClass.getAttribute("class");
    if (checkClass != "change") {
      setClass.setAttribute("class", "change");
      console.info("changed class");
    }
  }

  clearTimeout(changeClass);
  setTimeout(changeId, 57000);

  function changeId() {
    removeId.setAttribute("id", "GG");
  }
  clearTimeout(changeId);
}

clearInterval(controlAninmation_G);
setInterval(controlAninmation_H, 30000);

    function controlAninmation_H() {

      var getId = document.getElementById('HH');
      if (getId != "") {
        getId.setAttribute("id", "H");
      } moveId = document.getElementById('H'),
        setClass = removeId;
      setTimeout(changeClass, 20000);

      function changeClass() {
        var checkClass = setClass.getAttribute("class");

        if (checkClass != "change") {
          setClass.setAttribute("class", "change");
          console.info("changed class");
        }
      }

      clearTimeout(changeClass);
      setTimeout(changeId, 60000);

      function changeId() {
        removeId.setAttribute("id", "HH");
      }
      clearTimeout(changeId);
}

clearInterval(controlAninmation_H);

#A{ animation-name: wave;animation-duration: 20s;  animation-iteration-count: 1;animation-timing-function:linear;  }
    #B{ animation-name: QQQ;animation-duration: 20s;  animation-iteration-count: 1;animation-timing-function:linear;  }
    #C{ animation-name: EEEE;animation-duration: 20s; animation-iteration-count: 1; animation-timing-function:linear; }
    #D{ animation-name: RRRR;animation-duration: 20s;  animation-iteration-count: 1; animation-timing-function:linear; }
    #E{ animation-name: AAAA;animation-duration: 20s; animation-iteration-count: 1; animation-timing-function:linear; }
    #F{ animation-name: DDDDDD;animation-duration: 20s;  animation-iteration-count: 1;animation-timing-function:linear;  }
    #G{ animation-name:GGGGGGG;animation-duration: 20s; animation-iteration-count: 1; animation-timing-function:linear; }
    #H{ animation-name:KKKKKKKK;animation-duration: 20s; animation-iteration-count: 1;animation-timing-function:linear;  }
 
    .hidden{
    position: relative;
    top: 160px;}
    .change{
     position: relative;
    top: 160px;}
    @keyframes A{0%{transform: translateX(0%); top:17px; margin-left: 10px;margin-right: 10px;visibility: visible;  }100%{transform: translateX(100%); top:17px; margin-left: 10px;margin-right: 10px;visibility: visible; }}
    @keyframes B{0%{transform: translateX(0%);top:0px; margin-right: 10px;visibility: visible; }100%{transform: translateX(100%);top:0px; margin-right: 10px; visibility: visible; }}
    @keyframes C{0%{transform: translateX(0%);top:-17px;  margin-right: 10px;visibility: visible; }100%{transform: translateX(100%);top:-17px; margin-right: 10px;visibility: visible; }}
    @keyframes D{0%{transform: translateX(0%);top:-34px;margin-right: 10px;visibility: visible; }100%{transform: translateX(100%);top:-34px;margin-right: 10px;visibility: visible; }}
    @keyframes E{0%{transform: translateX(0%);top:-51px;margin-right: 10px;visibility: visible; }100%{transform: translateX(100%);top:-51px;margin-right: 10px;visibility: visible; }}
    @keyframes F{0%{transform: translateX(0%);top:-68px;margin-right: 10px;visibility: visible; }100%{transform: translateX(100%);top:-68px;margin-right: 10px;visibility: visible; }}
    @keyframes G{0%{transform: translateX(0%);top:-85px;margin-right: 10px;visibility: visible; }100%{transform: translateX(100%);top:-85px;margin-right: 10px;visibility: visible; }}
    @keyframes H{0%{transform: translateX(0%);top:-102px;margin-right: 10px;margin-left: 10px;visibility: visible; }100%{transform: translateX(100%);top:-102px;margin-right: 10px;margin-left: 10px;visibility: visible; }}

<div id = "AA" class = "hidden"><a href = "#">Welcome to StackOvervlow</a></div>
<div id = "BB" class = "hidden"><a href = "#">Welcome to StackOvervlow</a></div>   
<div id = "CC" class = "hidden"><a href = "#">Welcome to StackOvervlow</a></div>   
<div id = "DD" class = "hidden"><a href = "#">Welcome to StackOvervlow</a></div>   
<div id = "EE" class = "hidden"><a href = "#">Welcome to StackOvervlow</a></div>   
<div id = "FF" class = "hidden"><a href = "#">Welcome to StackOvervlow</a></div>   
<div id = "GG" class = "hidden"><a href = "#">Welcome to StackOvervlow</a></div>   
<div id = "HH" class = "hidden"><a href = "#">Welcome to StackOvervlow</a></div>

Пожалуйста, помогите нам всем и помогите себе, отформатируйте код javascript, чтобы сделать его читаемым для всех.

— 30.01.2019 00:25

Один из лучших советов, которые вы когда-либо получали при обучении программированию, — это "СУХОЙ" (Не повторяйтесь). У вас есть функция за функцией, которые почти идентичны. Ничего из этого не нужно. Вы можете сделать только одну функцию и передать ей значения, которые изменяются в качестве аргументов.

— 30.01.2019 00:36

Я написал много функций, которые имеют свой собственный идентификатор, чтобы часто им манипулировать.

— 30.01.2019 00:41

когда вы вызываете setInterval, он возвращает идентификатор, который вам нужно передать в clearInterval, вы не можете просто передать функцию, которую вы использовали в setinterval, чтобы очистить его.

— 30.01.2019 00:50

Хорошо, но как исправить мою ошибку?

— 30.01.2019 01:06

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

— 30.01.2019 02:06

javascript

30.01.2019 00:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Другие вопросы по теме

Могу ли я зацикливаться внутри массива PHP, как в JavaScript?

Как сделать перестановки, удовлетворяющие условиям, с помощью скрипта приложений Google?

Вызов Javascript из ReactJS с ошибкой ссылки на окно

Библиотека JSONView в Javascript

Каждый раз, когда я обновляю страницу, которую я зарегистрировал, она печатается 2 раза, как мне это исправить?

Как исправить неперехваченный javaScript referenceError?

Как не отображать дубликаты многих объектов в массиве

REACTJS _ eventListener — Почему мой прослушиватель событий срабатывает несколько раз?

R Shiny — добавление кнопки «удалить» в заголовок поля

Как сделать все изображения в ленивой загрузке HTML-строки?

Анимированный текст не работает как функция Javascript

Другие вопросы по теме

Похожие вопросы