Как сделать таймаут с назначением поочередно классов в массиве из элементов?

Question

[wiyod]

Массив из трех элементов. Изначально у всех элементов is-hidden
Надо назначать поочередно с дилеем класс is-active и навечно его зациклить.
Как написать луп перебирающий этот массив? Почему это не работает?

for(i = 0; i < this.elements.length; i++) {
      setTimeout(function() {
        this.elements[i].active = !this.elements[i].active
        this.elements[i].hidden = !this.elements[i].hidden
      }, 2500)
    }

https://codepen.io/kodej/pen/GMXxxR

Answer 1

[0xD34F]

Так?

Comments

[wiyod]

Именно! Спасибо большущее!
Вроде все понятно кроме этой строчки. Не могли бы пояснить?

currEl = (currEl + 1) % this.elements.length

[0xD34F]

Это и есть "зацикливание". Переменная currlEl хранит в себе индекс текущего активного элемента. Чтобы получить следующий элемент, мы её увеличиваем на единицу. А чтобы после последнего элемента получать нулевой - берём остаток от деления на количество элементов.

Разумеется, можно было бы просто увеличивать на единицу, а потом проверять не равен ли currEl длине массива elements, и если да, то сбрасывать currEl в 0. Как-то так:

currEl += 1;
if (currEl === this.elements.length) {
  currEl = 0;
}

Просто вариант с взятием остатка - он короче. Нет проверки, мы всегда получаем правильное значение.

[wiyod]

0xD34F, класс. Красиво как.

А не в курсе мог бы мне помочь transition Вью? Мне тут намекают, что его было бы проще использовать для моей задачи. Вы не в курсе? Меня это решение более чем устраивает, но стало любопытно.

[0xD34F]

Без понятия.