Первое что нужно понимать, что async/await - это всего лишь синтаксический сахар над промисами, а значит имеет все особенности работы с ними:
Во-первых, промис может разрешится (или отклонится, но в этой задаче reject не нужен) только единожды. Это сильно отличает их от событий, которые могут происходить многократно.
Во-вторых, промисы обрабатываются на особой фазе event loop называемой microtasks, что опять же отличается от событий, которые выполняются на другой фазе (tasks). Это означает, что обработка промиса (колбэк метода then, или сахар над ним в виде await оператора) всегда произойдет асинхронно от возникновения события. Это накладывает ряд ограничений, например не получится сделать preventDefault у объекта или не получится запустить действия требующие синхронной работы из
trusted события (play не muted video/audio, вход в фулскрин и тд).
В простом варианте можно слушать событие разово, для чего можно использовать
параметр once. Так же для оптимизации можно использовать
параметр passive, так как нам все равно поздно вызывать preventDefault, а в некоторых случаях это может дать нам оптимизацию. Ну и управлять
параметром capture попросту бесполезно, так как обработка будет в любом случае после обеих фаз. В итоге для этого можно пользоваться такой функцией хелпером:
function listenOnce(target, event) {
return new Promise(resolve => {
target.addEventListener(event, resolve, {
once: true,
passive: true
});
});
}
// использование
const event = await listenOnce(document, 'DOMContentLoaded');
console.log(event);
Если же нужно слушать событие многократно, то разумно обернуть прослушивание события в
асинхронный итератор. Здесь так же присутствуют все ограничения связанные с промисами, но за счет того, что у нас будет итератор по множеству промисов, мы сможем слушать событие многократно. так же тут нужно предусмотреть возможность отписаться от события. Хелпер для данного случая получится такой:
function listen(target, event) {
let currentResolve = () => {};
const handler = event => currentResolve({value: event, done: false});
return {
[Symbol.asyncIterator]() {
target.addEventListener(event, handler, {passive: true});
return {next: () => new Promise(resolve => {
currentResolve = resolve;
})};
},
stop() {
target.removeEventListener(event, handler);
currentResolve({done: true});
}
};
}
// использование
for await(const event = listenOnce(window, 'scroll')) {
console.log(event);
}
// с отпиской
const eventIterator = listenOnce(window, 'scroll');
let count = 10;
for await(const event = eventIterator) {
console.log(event);
if(--i === 0) {
eventIterator.stop();
}
}
