Обработка событий DOM, таких как «transitionend» с «async ... await» - будет ли это работать? - PullRequest
Новая
       13

Обработка событий DOM, таких как «transitionend» с «async ... await» - будет ли это работать?

0 голосов
/ 27 сентября 2018

Я делаю много вещей, где я должен реагировать на CSS-переходы и анимацию.Это всегда хлопотно делать всю настройку, как определение обработчиков (которые часто должны быть связаны также).

Теперь, когда я медленно перехожу к ES8, я нашел что-то, что, кажется, действительно работает, ирезко уменьшит мой шаблон.

Итак, вопрос в том, будет ли это иметь какие-то странные побочные эффекты, которые я, возможно, упустил из виду? 

let resFunc;

await new Promise(resolve => {
    resFunc = resolve;
    myEle.addEventListener("transitionend", resFunc);
    myEle.classList.add("animate");
});

myEle.removeEventListener("transitionend", resFunc);

// continue doing stuff

Практически выглядит хорошо, чтобы быть правдой;)

Теоретически, я мог бы написать это еще короче: 

await new Promise(resolve => {
    myEle.addEventListener("transitionend", resolve);
    myEle.classList.add("animate");
});

// continue doing stuff

Я имею в виду, что даже если в том же элементе есть другой переход, функция resolve будет вызвана снова, но должна сделатьничего, поскольку Promises может разрешить только один раз, верно?

И это также приведет к (небольшой?) утечке памяти, верно?

...