Как добавлять к элементам класс с интервалом между ними?

Question

[ForSureN1]

Добрый день. У меня на сайте есть прелоадер, когда сайт загрузился, он скрывается, и я хочу чтобы мои 4 блока появились поочередно слева на право как будто упали сверху, я знаю что это делается путем изменения высоты и т.п. НО вопрос в том, что я добавляю класс с использованием setTimeout для каждого элемента, но по неизвестной причине, классы добавляются одновременно.

function dropItem() {
  let items = document.querySelectorAll('.header-bottom__item')
  for(let i = 0; i < items.length; i++) {
    setTimeout(items[i].classList.add('drop'), i*2000 + 1000)
  }
}

window.onload = function () {
  dropItem();
}

Заранее благодарю

Answer 1

[v3shin]

Вы в setTimeout() передаете не функцию, а результат выполнения items[i].classList.add('drop'), что вычисляется сразу.

Comments

[ForSureN1]

Опыта с setTimeout практически никакого, подскажите как исправить ?

[ForSureN1]

function dropItem() {
  let items = document.querySelectorAll('.header-bottom__item')
  for(let i = 0; i < items.length; i++) {
    setTimeout(drop, i*2000 + 2000)
    function drop() {
      items[i].classList.add('drop')
    }
  }
}

Вот это работает, но правильно ли я сделал ?
Не с технической точки зрения имеется в виду, а с моральной :D

[Егор Живагин]

ForSureN1, да, хотя обычно упрощают до

setTimeout(() => { items[i].classList.add('drop'); }, i*2000 + 1000)

[ForSureN1]

Егор Живагин, ааа, вот так вот можно было упростить, я всё думал думал, теперь понятно, спасибо

Answer 2

[rgali3v]

А зачем перебирать через цикл)

function dropItem() {
  const items = document.querySelectorAll('.header-bottom__item');
  items.forEach(key, () => {
    setTimeout(key.classList.add('drop'), ...);
  });
}