Почему здесь вызывается SetTimeout()?

Question

[Кирилл Зиннатуллпин]

На https://learn.javascript.ru/callbacks есть задача где создается круг и в конце анимации создается надпись внутри круга , в коде решения этой задачи есть такой кусок кода

setTimeout(() => {
      div.style.width = radius * 2 + 'px';
      div.style.height = radius * 2 + 'px';

      div.addEventListener('transitionend', function handler() {
        div.removeEventListener('transitionend', handler);
        callback(div);
      });
    });
  }

Можете пожалуйста объяснить зачем здесь используется SetTimeout без второго аргумента

Весь код https://plnkr.co/edit/UbBBW52th3jIhy1T?p=preview&p...

Comments

[Сергей Сергей]

Чтобы движок js дождался от страницы добавления div, иначе новый элемент добавится сразу во весь размер.

Answer 1

[nekkie]

setTimeout ставит переданный callback в очередь событий даже, даже если указана задержка 0 (или не указана вообще), что гарантирует что этот callback выполниться после перерендеринга страницы - в данном случае это необходимо чтобы сначала отрисовался круг с нулевым радиусом, и тут же - с радиусом 200. то что это происходит не мгновенно - из за установленной длительности css анимации в 2 сек (setTimeout тут не причём).
Но без setTimeout радиус будет установлен в 0, затем сразу же в 200, а только потом будет рендеринг - и css анимация не сработает.

https://habr.com/ru/company/hexlet/blog/656003/