Как добавить задержку в цикле JavaScript перед следующей итерацией?

Question

[Решено благодаря лучшему ответу здесь]

Страница завершена и работает гладко.Посмотрите на результат на codepen:

https://codepen.io/Lietsaki/pen/pXOeKO

---

Я делаю простой сайт, который содержит некоторую информацию о меме Doge.Я хочу, чтобы некоторые фразы появлялись в каждом разделе, поэтому я добавил класс с «display: none» и настроил некоторые события в JS для удаления классов, когда пользователь нажимает на следующий раздел.

Однако,до сих пор я смог удалить только все классы сразу, вместо того чтобы удалять один класс каждые n секунд.

Я пытался использовать цикл for с setInterval, но он не работал.Поэтому я попытался создать функцию, которая зацикливается до тех пор, пока условие не будет выполнено с помощью setTimeout, но удаляет сразу все классы и выдает консольную ошибку:

"Uncaught TypeError: Невозможно прочитать свойство 'classList' из undefined at addPhrase (whoisdoge.js: 78) at whoisdoge.js: 83 "

Пожалуйста, проверьте код ниже.

// Select the phrases with the class ".phrase1"

var phrase1 = document.querySelectorAll(".phrase1");

// Turn it into an array and get its length(30) into a variable
var phrase1Arr = Array.from(phrase1);


// Function to remove a class every 3 seconds (NOT WORKING)

function addPhrase(l){

    phrase1Arr[l].classList.remove("disappear");

    if (l < 30){
       setTimeout(function(){
           l++;
           addPhrase(l)
       }, 3000);
    }

}

Answer 1

Ваша функция ломается, потому что вы пытаетесь удалить индекс 30, когда в вашем массиве только 30 элементов.(То есть вы пытаетесь удалить 31-й элемент)

Вы должны переместить свое удаление в то же выражение if, которое у вас уже есть.

function addPhrase(l){
  if (l < 30){
    phrase1Arr[l].classList.remove("disappear");
    setTimeout(function(){
      l++;
      addPhrase(l)
    }, 3000);
  }
}

---

Вы также звонитефункция вместо ссылки на функцию в ваших addEventListener вызовах:

sec0[0].addEventListener("click", addPhrase(0));

Должно быть

sec0[0].addEventListener("click", function(){
   addPhrase(0)
});