Как изменить класс каждого div по очереди с помощью setTimeout?

Question

[Мария Коробкоголовых]

У меня есть карточки, нужно чтобы они по очереди "переворачивались" ("переворот" делаю с помощью switchClass). У меня они переворачиваются все разом не смотря на то, что я использую setTimeout. Что я делаю не так? Может предложите более элегантное решение?

Answer 1

[0xD34F]

const $items = $('.card');
const openedClass = 'card--opened';
const closedClass = 'card--closed';
const delay = 500;
const flip = $item => $item.removeClass(closedClass).addClass(openedClass);

Вариант раз - назначаем таймауты на переключение классов сразу всем элементам, с временем задержки, зависящим от индекса элемента:

$items.each((i, n) => setTimeout(flip, (i + 1) * delay, $(n)));

Вариант два - назначаем таймауты поочерёдно, следующий в коллбеке предыдущего, задержка у всех одинаковая:

(function next(i) {
  if (i < $items.length) {
    setTimeout(() => {
      flip($items.eq(i));
      next(-~i);
    }, delay);
  }
})(0);

Вариант три - вместо таймаутов назначаем интервал:

let i = 0;
const intervalID = setInterval(() => {
  flip($items.eq(i));
  if (++i >= $items.length) {
    clearInterval(intervalID);
  }
}, delay);

Comments

[Мария Коробкоголовых]

Спасибо!

А в ie11 это не будет работать? Он вроде не умеет в стрелочные функции

[0xD34F]

Не будет. Не умеет. Надо чтобы работало - замените стрелочные функции на обычные, const и let на var.