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));
}

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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