1

Пытаюсь осваивать промисы из нового ES6, пока тяжело понятны суть и назначения. Попытался найти для себя простую задачку, в которой смогу их применить.

Есть обычное меню, открывающееся по клику. в нем метод для открытия

_openMenu(target) {
    this._closeMenu();
    target.classList.add('isActive');
    target.nextElementSibling.classList.add('isOpened');

    setTimeout(()=> document.addEventListener('click', this._closeMenu), 0);
}

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

Попытался переписать это с промисом, но результат не помогает, меню так же схлопывается, как правильно написать промис для асинхронного выполнения?

_openMenu(target) {
Promise.resolve()
  .then(() => {
    this._closeMenu();
    target.classList.add('isActive');
    target.nextElementSibling.classList.add('isOpened');
    console.log('step 1');
    return Promise.resolve();
  })
  .then(() => {
    document.addEventListener('click', this._closeMenu);
    console.log('step 2');
  });

}

1 ответ 1

1

Написать эту вещь "с промизами" можно вот так:

_openMenu(target) {
    new Promise((resolve) => {
        this._closeMenu();
        target.classList.add('isActive');
        target.nextElementSibling.classList.add('isOpened');
        setTimeout(resolve, 0);
    })
    .then(() => {
        document.addEventListener('click', this._closeMenu);
    });
}

или вот так:

_openMenu(target) {
    this._closeMenu();
    target.classList.add('isActive');
    target.nextElementSibling.classList.add('isOpened');

    new Promise((resolve) => setTimeout(resolve, 0))
    .then(() => document.addEventListener('click', this._closeMenu));
}

Но я бы не назвал ни один из этих вариантов правильным. Потому что промизы в этой задаче не нужны.

Область применения промизов - это возврат значений из функции. К примеру, функция, которая показывает модальный диалог, могла бы возвращать промиз, содержащий введенное пользователем в этом диалоге значение.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.