Как писать асинхронный код?

Question

[Юрий Иванов]

У меня есть функция, которая вызывается во время удаления попапа:

function removePopUpFilter() {
  let filterContainer = document.querySelector('.filter-container');
  filterContainer.style.opacity = '0';
  filterContainer.remove()
}

Мне надо каким-либо образом сделать это ассинхронным, чтобы сначала контейнер получил свойство опасити 0, а затем удалился. В классах задан трансишен, поэтому опасити происходит плавно.
Я могу это сделать обернув удаление в таймаут, но мне кажется это очень некрасивый способ писать такой код асинхронно:

function removePopUpFilter() {
  let filterContainer = document.querySelector('.filter-container');
  filterContainer.style.opacity = '0';
  setTimeout(() => {
    filterContainer.remove()
  }, 400);
}

Answer 1

[Сергей Соколов]

тут можно через событие окончания transition — transitionend:

function removePopUpFilter() {
  const filterContainer = document.querySelector('.filter-container');
  filterContainer.style.opacity = '0';
  filterContainer.addEventListener('transitionend', () => filterContainer.remove());
};

Comments

[Юрий Иванов]

Спасибо большое за предложенный вариант решение моей задачи. Но мне интересно, можно ли писать вот такой вот простой код с помощью промисов/async/await

async function removePopUpFilter() {
  let filterContainer = document.querySelector('.filter-container');
  await filterContainer.style.opacity = '0';
  filterContainer.remove()
}

Примерно вот так, это не работает конечно. Но это для примера. В моем воображении это выглядит круто))

[Сергей Соколов]

можно:

async function removePopUpFilter() {
  const filterContainer = document.querySelector('.filter-container');

  // первым делом
  filterContainer.style.opacity = '0';

  // теперь дождаться
  await new Promise(resolve => filterContainer.addEventListener('transitionend', resolve));

  // и наконец
  filterContainer.remove();
}

но это как-то не к месту и длиннее.. )

[Юрий Иванов]

Сергей Соколов, Я все понял, спасибо еще раз!:)

Answer 2

[Rsa97]

Используйте событие transitionend